Non-destructive editing for a media editing application

ABSTRACT

Some embodiments provide a method for defining a data structure that represents an edited image managed by an image editing application. The defining of the data structure includes defining an identifier for identifying an original version of the edited image. The defining of the data structure includes defining a set of identifiers for identifying a set of edit instructions for applying edits to the original version of the edited image. The defining of the data structure includes defining a set of cached images for storing a set of different versions of the edited image.

CLAIM OF BENEFIT TO PRIOR APPLICATIONS

This application claims the benefit of U.S. Provisional PatentApplication 61/607,524, filed Mar. 6, 2012; U.S. Provisional PatentApplication 61/607,525, filed Mar. 6, 2012; U.S. Provisional PatentApplication 61/607,554, filed Mar. 6, 2012; U.S. Provisional PatentApplication 61/607,569, filed Mar. 6, 2012; U.S. Provisional PatentApplication 61/607,574, filed Mar. 6, 2012; and U.S. Provisional patentapplication Ser. No. ______, entitled “Color Adjustors for ColorSegments”, with attorney docket number APLE.P0355P, filed May 15, 2012.U.S. Provisional Patent Applications 61/607,524, 61/607,525, 61/607,554,61/607,569, 61/607,574, and U.S. Provisional patent application Ser. No.______, with attorney docket number APLE.P0355P, are hereby incorporatedby reference.

BACKGROUND

Today, many image editing applications provide a number of differenttools to managed and manipulate digital images. Examples of suchapplications are iPhoto, which is provided by Apple Inc., Picasa, whichis provided by Google, Photoshop, which is provided by Adobe, ExpressMedia, which is provided by Microsoft, etc. Some image editingapplications allow the user to view images, edit images, and/or organizeimages.

Users often wish to edit images in order to improve the appearance ofthe image, to make the images appear a certain way, to apply effects tothe image, etc. In many instances, a user must iterate through manysteps while using many different tools in order to modify the image inthe way that the user desires. This usually results in the user spendingan inordinate amount of time editing the image, and, at the end, theuser may still not be able to edit the image in way that the userwishes.

In many instances, the user knows what the user wants the image to looklike, but the user either lacks the knowledge to produce the desiredappearance of the image and/or the user cannot find the tools in theimage editing application that allows the user to produce the desiredappearance. Thus, many users may need to spend a large amount of timelearning to use the media editing application.

When editing images with an image editing application, the edits made tothe images are typically permanent. Therefore, if a user makes a mistakeor wishes to changed or undo edits, the user has to start over byediting the original image file or the user has to fix the mistake byfurther editing the image.

BRIEF SUMMARY

For an image editing application, some embodiments of the inventionprovide a novel user interface (UI) tool that provides a set of fanningUI controls. In some embodiments, when the UI tool is activated, the UItool provides an animation that fans the UI controls open. When one ofthe UI controls of the UI tool is selected to be used, the UI toolprovides a an animation that fans the UI controls closed to show theselected UI control

Different embodiments of the UI tool provide different types of fanninganimations. For instance, the UI tool of some embodiments fans the UIcontrols by fanning the UI controls in one direction about a fixedlocation. This way, the UI controls appear like the UI controls arepinned at one end of the UI controls and the UI controls fan open andclosed about the location at which the UI controls are pinned.

In some embodiments, the UI tool fans the UI controls by fanning the UIcontrols two directions about a fixed location. In such embodiments, theUI tool fans some of the UI controls in one direction about the fixedlocation and fans the other UI controls in the opposite direction aboutthe fixed location.

While the fanning open the UI controls, the UI tool of some embodimentsdisplays the UI controls such that the UI controls appear to slide ontoa display area (e.g., the entire screen of a computing device) fromoutside the display area. Similarly, while the fanning closed the UIcontrols, the UI tool of some embodiments displays the UI controls suchthat the UI controls appear to slide off of the display area from nearthe center of the display area.

The UI tool of different embodiments provides different types of UIcontrols. For example, in some embodiments, the UI tool provides UIcontrols for applying effects to an image. These types of UI controlswill be interchangeably referred to as effects controls in thisapplication. Examples of effects include various filter effects, duotoneeffects, non-photorealistic desaturation, gradient effects, vignetteeffects, tilt-shift effect, etc.

Different embodiments provide different types of effects controls. Forexample, a first type of effects control displays a set of selectablethumbnail images of an image being edited. Each selectable thumbnailimage displays a different extent of an effect associated with theeffects control applied to the thumbnail image. Selecting a thumbnailimage causes the application to apply the effect to the image beingedited to the extent that the effect is applied to the thumbnail image.This way, the selectable thumbnail images provide a preview of theeffect applied to the image being edited before applying the effect tothe image.

A second type of effects control includes a sliding region. Differentlocations along the sliding region are for applying different extents ofthe effect to the image being edited. A user may apply different extentsof the effect to the image being edited by selecting different locations(e.g., by touching the location on a touchscreen) along the slidingregion. Alternatively, the user may apply different extents of theeffect to the image by touching the sliding region and continuing totouch the sliding region while sliding along different locations of thesliding region.

For the second type of effects control, a set of thumbnail images of theimage being edited are displayed at different location along the slidingregion. Each thumbnail image displays a different extent of the effectassociated with the effects control applied to the thumbnail image. Thelocation at or near a particular thumbnail image along the slidingregion corresponds to the extent of the effect that is applied to thethumbnail image. Thus, the location of a thumbnail image with a fullextent of the effect to the thumbnail image is for applying a fullextent of the effect to the image being edited, the location of athumbnail image with a half extent of the effect to the thumbnail imageis for applying a half extent of the effect to the image being edited,etc.

Another type of UI control that the UI tool of some embodiments providesis for applying brush effects to portions of an image. These types of UIcontrols will be interchangeably referred to as brush controls in thisapplication. Examples of brush controls include brush controls to removered-eye and blemishes, brush controls to saturate, desaturate, lighten,darken, sharpen, or soften a portion of an image, etc.

In some embodiments, the image editing application of some embodimentsprovides various tools for editing an image. When different edits aremade to the image using different tools, the application applies thedifferent edits in a particular order. For instance, the applicationmight apply exposure edits to an image before applying effects edits tothe image. To ensure that a first type of edits are applied to the imagebefore a second types of edits, the application of some embodimentstemporarily removes the second type of edits, if any, from the imagewhen the user is wishes to apply the first type of edit to the image.After the user is finished applying the first type of edits, theapplication applies back to the image the second type of edits that wereremoved from the image. In some embodiments, the application provides apeeling on and peeling off animation to indicate to the user that editsare being removed or being applied back to the image.

The application of some embodiments stores information in a datastructure that represents images managed by the application. In someembodiments, the application stores the data structure in a manner thatpreserves the original image when the image is edited. To provide quickviewing of images in through the GUI of the application, the applicationof some embodiments caches different versions of the image that arefrequently accessed, used, and/or displayed. In some embodiments, theapplication provides a feature that allows the user to switch betweenthe current edited version of the image and the original image. Tofacilitate the quick switching between the different versions of theimage, the application of some embodiments utilizes the non-destructivemethod of storing images.

In addition to the features described above, the application of someembodiments provides a feature that allows the user of the applicationto send images to users of other devices that are also running theapplication. In some embodiments, the application sends the image in adata structure that stores the image in a non-destructive manner. Thisway, the recipient of the image may view the original image, the versionedited by the sender, make additional and/or different edits to theimage, send the image to other users, etc.

The preceding Summary is intended to serve as a brief introduction tosome embodiments of the invention. It is not meant to be an introductionor overview of all inventive subject matter disclosed in this document.The Detailed Description that follows and the Drawings that are referredto in the Detailed Description will further describe the embodimentsdescribed in the Summary as well as other embodiments. Accordingly, tounderstand all the embodiments described by this document, a full reviewof the Summary, Detailed Description and the Drawings is needed.Moreover, the claimed subject matters are not to be limited by theillustrative details in the Summary, Detailed Description and theDrawing, but rather are to be defined by the appended claims, becausethe claimed subject matters can be embodied in other specific formswithout departing from the spirit of the subject matters.

BRIEF DESCRIPTION OF THE DRAWINGS

The novel features of the invention are set forth in the appendedclaims. However, for purposes of explanation, several embodiments of theinvention are set forth in the following figures.

FIG. 1 conceptually illustrates a graphical user interface (GUI) of animage editing application that includes an effects tool of someembodiments and the activation of the effects tool.

FIG. 2 conceptually illustrates selecting an effects control of theeffects tool illustrated in FIG. 1.

FIG. 3 conceptually illustrates changing the selected effects control ofthe effects tool illustrated in FIG. 1.

FIG. 4 conceptually illustrates a GUI that includes an effects tool ofsome embodiments and the activation of the effects tool.

FIG. 5 conceptually illustrates a GUI of an image editing applicationthat includes an effects tool of some embodiments and the activation ofthe effects tool.

FIG. 6 conceptually illustrates selecting an effects control of theeffects tool illustrated in FIG. 5.

FIG. 7 conceptually illustrates changing the selected effects control ofthe effects tool illustrated in FIG. 5.

FIG. 8 conceptually illustrates an effects tool of some embodiments thatincludes one type of effects controls.

FIG. 9 conceptually illustrates an effects tool of some embodiments thatincludes another type of effects controls.

FIG. 10 conceptually illustrates an effects tool of some embodimentsthat includes another type of effects controls.

FIG. 11 conceptually illustrates an effects tool of some embodimentsthat includes several types of effects controls.

FIG. 12 conceptually illustrates a thumbnail slider control of someembodiments and using the thumbnail slider control to apply an effect toan image.

FIG. 13 conceptually illustrates a thumbnail slider control of someembodiments and using the thumbnail slider control to apply an effect toan image.

FIG. 14 conceptually illustrates a thumbnail slider control of someembodiments and using the thumbnail slider control to apply differenteffects to an image.

FIG. 15 conceptually illustrates a thumbnail slider control of someembodiments and using the thumbnail slider control to apply multipleeffects to an image.

FIG. 16 conceptually illustrates a process of some embodiments forgenerating thumbnails for thumbnail slider controls of an effects tool.

FIG. 17 conceptually illustrates a state diagram of an application ofsome embodiments that provides an effects tool.

FIG. 18 conceptually illustrates a GUI that includes a brushes tool ofsome embodiments and the activation of the brushes tool.

FIG. 19 conceptually illustrates selecting a brush control of thebrushes tool illustrated in FIG. 18.

FIG. 20 conceptually illustrates a technique for changing the selectedbrush control of the brushes tool illustrated in FIG. 18.

FIG. 21 conceptually illustrates another technique for changing theselected brush control of the brushes tool illustrated in FIG. 18.

FIG. 22 conceptually illustrates brush controls with differentappearances.

FIG. 23 conceptually illustrates a GUI that includes a brushes tool ofsome embodiments and the activation of the brushes tool.

FIG. 24 conceptually illustrates selecting a brush control of thebrushes tool illustrated in FIG. 23.

FIG. 25 conceptually illustrates a GUI that includes a brushes tool ofsome embodiments and the activation of the brushes tool.

FIG. 26 conceptually illustrates selecting a brush control of thebrushes tool illustrated in FIG. 25.

FIG. 27 conceptually illustrates changing the selected brush control ofthe brushes tool illustrated in FIG. 25.

FIG. 28 conceptually illustrates brush controls with differentappearances.

FIG. 29 conceptually illustrates applying a brush effect to an imageusing a brush control of a brushes tool of some embodiments.

FIG. 30 conceptually illustrates applying a brush effect to an imageusing a brush control of a brushes tool of some embodiments anddisabling the brush effect applied in FIG. 29.

FIG. 31 conceptually illustrates a state diagram of an application ofsome embodiments that provides the brushes tool.

FIG. 32 conceptually illustrates a software architecture of anapplication of some embodiments that provides a UI tool that includesfanning UI controls.

FIGS. 33 a-33 c conceptually illustrate an example of an ordered editoperation according to some embodiments.

FIGS. 34 a-34 c conceptually illustrate an example of an ordered editoperation according to some embodiments.

FIG. 35 illustrates a table of orders for applying edits according tosome embodiments.

FIG. 36 conceptually illustrates a software architecture of an imagedediting application of some embodiments that provides an ordered editfeature.

FIG. 37 conceptually illustrates a data structure for an image that isstored by the application of some embodiments.

FIG. 38 conceptually illustrates a toggle operation of some embodimentsthat allows the user to toggle between the original image and thecurrently edited image.

FIG. 39 conceptually illustrates another toggle operation of someembodiments that allows the user to toggle between the edited image tothe original image.

FIG. 40 conceptually illustrates another toggle operation of someembodiments that allows the user to toggle between the original imageand an edited image.

FIG. 41 conceptually illustrates a toggle operation of some embodimentsthat allows the user to toggle between a cropped image and the originalimage when the crop tool is active.

FIG. 42 conceptually illustrates an example of two devices using thebeaming services of the image editing application of some embodiments.

FIG. 43 conceptually illustrates an example of a first device beaming anedited image to a second device.

FIG. 44 conceptually illustrates an example of a user browsing through alibrary of beamed images on a device.

FIG. 45 conceptually illustrates a process of some embodiments forbroadcasting a beaming service for receiving beamed images.

FIG. 46 conceptually illustrates a process of some embodiments fordetecting a beaming service to identify candidate devices for receivingbeamed images.

FIG. 47 illustrates a detailed view of a GUI of some embodiments forviewing, editing, and organizing images.

FIG. 48 conceptually illustrates a data structure for an image as storedby the application of some embodiments.

FIG. 49 is an example of an architecture of a mobile computing device.

FIG. 50 conceptually illustrates an electronic device with which someembodiments of the invention are implemented.

DETAILED DESCRIPTION

In the following detailed description of the invention, numerousdetails, examples, and embodiments of the invention are set forth anddescribed. However, it will be clear and apparent to one skilled in theart that the invention is not limited to the embodiments set forth andthat the invention may be practiced without some of the specific detailsand examples discussed.

For an image editing application, some embodiments of the inventionprovide a novel user interface (UI) tool that provides a set of fanningUI controls. In some embodiments, when the UI tool is activated, the UItool provides an animation that fans the UI controls open. When one ofthe UI controls of the UI tool is selected to be used, the UI toolprovides an animation that fans the UI controls closed to show theselected UI control.

Different embodiments of the UI tool provide different types of fanninganimations. For instance, the UI tool of some embodiments fans the UIcontrols by fanning the UI controls in one direction about a fixedlocation. This way, the UI controls appear like the UI controls arepinned at one end of the UI controls and the UI controls fan open andclosed about the location at which the UI controls are pinned.

In some embodiments, the UI tool fans the UI controls by fanning the UIcontrols two directions about a fixed location. In such embodiments, theUI tool fans some of the UI controls in one direction about the fixedlocation and fans the other UI controls in the opposite direction aboutthe fixed location.

While the fanning open the UI controls, the UI tool of some embodimentsdisplays the UI controls such that the UI controls appear to slide ontoa display area (e.g., the entire screen of a computing device) fromoutside the display area. Similarly, while the fanning closed the UIcontrols, the UI tool of some embodiments displays the UI controls suchthat the UI controls appear to slide off of the display area from nearthe center of the display area.

The UI tool of different embodiments provides different types of UIcontrols. For example, in some embodiments, the UI tool provides UIcontrols for applying effects to an image. These types of UI controlswill be interchangeably referred to as effects controls in thisapplication. Examples of effects include various filter effects, duotoneeffects, non-photorealistic desaturation effects, gradient effects,vignette effects, tilt-shift effects, etc.

Different embodiments provide different types of effects controls. Forexample, a first type of effects control displays a set of selectablethumbnail images of an image being edited. Each selectable thumbnailimage displays a different extent of an effect associated with theeffects control applied to the thumbnail image. Selecting a thumbnailimage causes the application to apply the effect to the image beingedited to the extent that the effect is applied to the thumbnail image.This way, the selectable thumbnail images provide a preview of theeffect applied to the image being edited before applying the effect tothe image.

A second type of effects control includes a sliding region. Differentlocations along the sliding region are for applying different extents ofthe effect to the image being edited. A user may apply different extentsof the effect to the image being edited by selecting different locations(e.g., by touching the location on a touchscreen) along the slidingregion. Alternatively, the user may apply different extents of theeffect to the image by touching the sliding region and continuing totouch the sliding region while sliding along different locations of thesliding region.

For the second type of effects control, a set of thumbnail images of theimage being edited are displayed at different location along the slidingregion. Each thumbnail image displays a different extent of the effectassociated with the effects control applied to the thumbnail image. Thelocation at or near a particular thumbnail image along the slidingregion corresponds to the extent of the effect that is applied to thethumbnail image. Thus, the location of a thumbnail image with a fullextent of the effect to the thumbnail image is for applying a fullextent of the effect to the image being edited, the location of athumbnail image with a half extent of the effect to the thumbnail imageis for applying a half extent of the effect to the image being edited,etc.

Another type of UI control that the UI tool of some embodiments providesis for applying brush effects to portions of an image. These types of UIcontrols will be interchangeably referred to as brush controls in thisapplication. Examples of brush controls include brush controls to removered-eye and blemishes, brush controls to saturate, desaturate, lighten,darken, sharpen, or soften a portion of an image, etc.

In some embodiments, the image editing application of some embodimentsprovides various tools for editing an image. When different edits aremade to the image using different tools, the application applies thedifferent edits in a particular order. For instance, the applicationmight apply exposure edits to an image before applying effects edits tothe image. To ensure that a first type of edits are applied to the imagebefore a second types of edits, the application of some embodimentstemporarily removes the second type of edits, if any, from the imagewhen the user is wishes to apply the first type of edit to the image.After the user is finished applying the first type of edits, theapplication applies back to the image the second type of edits that wereremoved from the image. In some embodiments, the application provides apeeling on and peeling off animation to indicate to the user that editsare being removed or being applied back to the image.

The application of some embodiments stores information in a datastructure that represents images managed by the application. In someembodiments, the application stores the data structure in a manner thatpreserves the original image when the image is edited. To provide quickviewing of images in through the GUI of the application, the applicationof some embodiments caches different versions of the image that arefrequently accessed, used, and/or displayed. In some embodiments, theapplication provides a feature that allows the user to switch betweenthe current edited version of the image and the original image. Tofacilitate the quick switching between the different versions of theimage, the application of some embodiments utilizes the non-destructivemethod of storing images.

In addition to the features described above, the application of someembodiments provides a feature that allows the user of the applicationto send images to users of other devices that are also running theapplication. In some embodiments, the application sends the image in adata structure that stores the image in a non-destructive manner. Thisway, the recipient of the image may view the original image, the versionedited by the sender, make additional and/or different edits to theimage, send the image to other users, etc.

Several more detailed embodiments of the invention are described in thesections below. Section I conceptually describes details of UI toolsthat have fanning UI controls. Next, Section II conceptually describesdetails of ordered edit processing according to some embodiments of theinvention. Section III follows this with a description of a datastructure that for representing images according to some embodiments.Next, Section IV describes details of a beaming feature provided by theapplication of some embodiments. Section V describes an example imageviewing, editing, and organization application of some embodiments.Finally, Section VI describes several electronic systems that implementsome embodiments of the invention.

I. User Interface Tools with Fanning UI Controls

As mentioned above, the image editing application of some embodimentsprovides a UI tool that includes a set of fanning UI controls. Differentembodiments of the UI tool provide different types of UI controls. Thefollowing section will describe examples of UI tools for applyingeffects to an image and examples of UI tools for applying brush effectsto an image.

A. Effects Tool

FIG. 1 conceptually illustrates a graphical user interface (GUI) 100 ofan image editing application that includes an effects tool 175 of someembodiments and the activation of the effects tool 175. Specifically,FIG. 1 illustrates the GUI 100 at four different stages 105-120 of aneffects tool activation operation. Each of the stages 105-120 will bedescribed in further detail below. However, the elements of the GUI 100will be described first.

As shown, the GUI 100 includes a thumbnail display area 125, an imagedisplay area 145, a first toolbar 150, a second toolbar 135, and a thirdtoolbar 195. The thumbnail display area 125 displays thumbnails of theimages in a selected collection. Thumbnails are small representations ofa full-size image, and represent only a portion of an image in someembodiments. A user may select one or more images in the thumbnaildisplay area (e.g., by touching the thumbnail image). The selectedthumbnails are displayed with a highlight or other indicator ofselection. In thumbnail display area 125, the thumbnail 130 is selected.

The image display area 145 displays the selected thumbnail image at alarger resolution. This will typically not be the full size of the image(which are often of a higher resolution than the display screen of thedevice on which the application displays the image). In someembodiments, the image in the image display area 145 is displayed in theaspect ratio of the full-size image.

The first toolbar 150 displays title information (e.g., the name of thecollection shown in the GUI, a caption that a user has added to thecurrently selected image, etc.). In addition, the toolbar 150 includes afirst set of UI items 151-154 and a second set of UI items 155-158.

In the first set of items, the back button 151 enables the user tonavigate back to a collection organization GUI. Selection of the gridbutton 152 causes the application to move the thumbnail display area onor off of the GUI (e.g., via a slide animation). In some embodiments,users can also slide the thumbnail display area on or off of the GUI 100via a swipe gesture. The help button 153 activates a context-sensitivehelp feature that identifies a current set of tools active for the userand provides help indicators for those tools that succinctly describethe tools to the user. In some embodiments, the help indicators areselectable to access additional information about the tools. Selectionof the undo button 154 causes the application to remove the most recentedit to the image, whether this edit is a crop, color adjustment, etc.

In the second set of UI items, the sharing button 155 enables a user toshare an image in a variety of different ways. In some embodiments, theuser can send a selected image to another compatible device on the samenetwork (e.g., Wi-Fi or Bluetooth network), upload an image to an imagehosting or social media website, and create a journal (i.e., apresentation of arranged images to which additional content can beadded) from a set of selected images, among others.

The information button 156 activates a display area that displaysadditional information about one or more selected images. Theinformation displayed in the activated display area may include Exifdata stored for an image (e.g., camera settings, timestamp, etc.). Theshow original button 157 enables the user to toggle between the originalversion of an image and the current edited version of the image.

The edit button 158 allows the user to enter or exit edit mode. When auser has selected one of the sets of editing tools in the toolbar 135,the edit button 158 returns the user to a viewing and organizing mode.When the user selects the edit button 158 while in the viewing mode, theapplication returns to the last used set of editing tools in the ordershown in toolbar 135. That is, the items in the toolbar 135 are arrangedin a particular order, and the edit button 158 activates the rightmostof those items for which edits have been made to the selected image.

The toolbar 135 includes five UI items 132-140, arranged in a particularorder from left to right. The crop item 132 activates a cropping androtation tool that allows the user to align crooked images and removeunwanted portions of an image. The exposure item 134 activates a set ofexposure tools that allow the user to modify the black point, shadows,contrast, brightness, highlights, and white point of an image. In someembodiments, the set of exposure tools is a set of connected slidersthat work together to modify the luminance histogram of an image.Details of exposure tools are described in concurrently filed U.S.patent application Ser. No. ______, with attorney docket numberAPLE.P0343, entitled “Unified Slider Control for Modifying MultipleImage Properties”. U.S. patent application Ser. No. ______, withattorney docket number APLE.P0343, is here incorporated by reference.The color item 136 activates a set of color tools that enable the userto modify the saturation and vibrancy, as well as color-specificsaturations (e.g., blue pixels or green pixels) and white balance. Insome embodiments, some of these tools are presented as a set of sliders.The brushes item 138 activates a set of enhancement tools that enable auser to localize modifications to the image. With the brushes, the usercan remove red-eye and blemishes, and apply or remove saturation andother features to localized portions of an image by performing a rubbingaction over the image. Finally, the effects item 140 activates a set ofspecial effects that the user can apply to the image. These effectsinclude gradients, tilt shifts, non-photorealistic desaturation effects,grayscale effects, various filters, etc. In some embodiments, theapplication presents these effects as a set of items that fan out fromthe toolbar 195.

The toolbar 195 includes a settings item 170. The settings button 170activates a context-sensitive menu that provides different menu optionsdepending on the currently active toolset. For instance, in viewing modethe menu of some embodiments provides options for creating a new album,setting a key photo for an album, copying settings from one photo toanother, and other options. When different sets of editing tools areactive, the menu provides options related to the particular activetoolset.

One of ordinary skill in the art will recognize that the GUI 100 is onlyone example of many possible graphical user interfaces for an imageediting application. For instance, the various items could be located indifferent areas or in a different order, and some embodiments mightinclude items with additional or different functionalities. Thethumbnail display area of some embodiments might display thumbnails thatmatch the aspect ratio of their corresponding full-size images, etc.

An example activation operation of the effects tool 175 will now bedescribed by reference to the four stages 105-120 illustrated in FIG. 1.The first stage 105 of the GUI 100 shows the activation of the effectstool 175. As shown, a user is selecting the selectable effects tool UIitem 140 (e.g., by touching the UI item 140) to activate the effectstool 175.

The second stage 110 illustrates the GUI 100 after the effects tool 175is activated. As shown, the GUI 100 is displaying the start of thefanning open animation of effects controls of the effects tool 175 andthe effects tool UI item 140 is highlighted. As shown, the effects tool175 includes a set of effects controls 180-188 and a selectable UI item190. Each of the effects controls 180-188 is for applying a set ofeffects to an image being edited (the image 142 in this example). Theselectable UI item 190 is for initiating a fanning open animation of theeffects controls 180-188.

When the image editing application receives the selection of the effectstool UI item 140, the application highlights the UI item 140 and startsdisplaying the fanning open animation of the set of effects controls180-188. In this example, the starting position and location of theeffects controls 180-188 for the fanning open animation is the positionof the effects control 188, which positioned over the toolbar 195. Thatis, all of the effects controls 180-188 start at the location andposition of the effects control 188 at the beginning of the fanning openanimation. The image editing application displays the fanning openanimation of the effects controls 180-188 by displaying rotations ofdifferent effects controls from the starting position and location bydifferent amounts about a fixed location (e.g., a pivot point). In thisexample, the fixed location is the UI item 190. As shown, each of theeffects controls 180-186 rotates about the fixed location in decreasingamounts, and the effects control 188 does not rotate at all. In otherwords, the effects control 180 rotates the largest amount about thefixed location, the effects control 182 rotates the second largestamount about the fixed location, the effects control 184 rotates thethird largest amount about the fixed location, the effects control 186rotates the fourth largest amount about the fixed location, and theeffects control 188 does not rotate about the fixed location.

In some embodiments, the image editing application displays the fanningopen animation of the effects controls 180-188 by displaying, for adefined interval of time, rotations of different effects controls aboutthe fixed location at different speeds from the starting position andlocation. The effects control 180 rotates at the fastest speed about thefixed location, the effects control 182 rotates at the second fastestspeed about the fixed location, the effects control 184 rotates at thethird fastest speed about the fixed location, the effects control 186rotates at the fourth fastest speed about the fixed location, and theeffects control 188 does not rotate about the fixed location.

The image editing application of some embodiments displays the fanningopen animation of the effects controls 180-188 by displaying rotationsof the effects controls about the fixed location at the same speed fromthe starting position and location. To display a fanning open animationwith the effects controls 180-188 moving at the same speed, the imageediting application starts moving different effects controls atdifferent times (e.g., start moving a particular effects control after adefined amount of time). Under this approach, the application startsmoving the effects control 180 first, the effects control 182 second,the effects control 184 third, the effects control 186 fourth, and theeffects control 188 last.

The third stage 115 illustrates the GUI 100 near the end of the fanningopen animation of the effects controls 180-188 of the effects tool 175.As shown, the position of the effects controls 180-188 is fanned openmore than the position of the effects controls 180-188 illustrated inthe second stage 110.

The fourth stage 120 shows the GUI 100 after the completion of thefanning open animation of the effects controls 180-188. As shown, theeffects control 180 has rotated approximately 90 degrees clockwise aboutthe UI item 190 from its starting location and position (the locationand position of the effects control 188 in this example), the effectscontrol 182 has rotated approximately 67.5 degrees clockwise about theUI item 190 from its starting location and position, the effects control184 has rotated approximately 45 degrees clockwise about the UI item 190from its starting location and position, and the effects control 186 hasrotated approximately 22.5 degrees clockwise about the UI item 190 fromits starting location and position.

FIG. 1 illustrates an example of a fanning open animation of the effectscontrols of an effects tool when the effects tool is activated. In someembodiments, the image editing application does not display a fanningopen animation of the effects controls of the effects tool when theeffects tool is activated. Instead, the application of some suchembodiments displays the last state (e.g., the most recent state) of theeffects tool. For instance, the image editing application might displaythe selected effects control in a manner similar to the fourth stage220, which is described below by reference to FIG. 2, when the effectstool is activated and an effects controls of the effects tool isselected in the last state of the effects tool.

FIG. 2 conceptually illustrates selecting an effects control of theeffects tool 175 illustrated in FIG. 1. In particular, FIG. 2illustrates the GUI 100 at four different stages 205-220 of an effectscontrol selection operation.

The first stage 205 of the GUI 100 shows the selection of an effectscontrol of the effects tool 175. As shown, a user is selecting theeffects controls 184 (e.g., by touching the effects control 184). Whenthe image editing application receives the selection of the effectscontrol 184, the application highlights the selected effects control(the effects control 184 in this example) and starts displaying afanning closed animation of the set of effects controls 180-188.

The second stage 210 illustrates the GUI 100 after the effects control184 is selected and the fanning closed animation of the set of effectscontrols 180-188 has started. The image editing application highlightsthe effects control 184 by bolding the border of the effects control184. In this example, the positions and locations of the set of effectscontrols 180-188 shown in the fourth stage 120 of FIG. 1 are the set ofeffects controls 180-188 s′ starting positions and locations for thefanning closed animation.

The image editing application displays the fanning closed animation ofthe effects controls 180-188 by displaying rotations of differenteffects controls from the effects controls' starting positions andlocations by different amounts about a fixed location (the UI item 190in this example). As shown, each of the effects controls 180-186 rotatesabout the fixed location in decreasing amounts, and the effects control188 does not rotate at all. In other words, the effects control 180rotates the largest amount about the fixed location, the effects control182 rotates the second largest amount about the fixed location, theeffects control 184 rotates the third largest amount about the fixedlocation, the effects control 186 rotates the fourth largest amountabout the fixed location, and the effects control 188 does not rotateabout the fixed location. The direction of rotation of the effectscontrol 180-186 illustrated in FIG. 2 (counter-clockwise in thisexample) is opposite of the direction of the rotation of the effectscontrol 180-186 during the fanning open animation illustrated in FIG. 1.

In some embodiments, the image editing application displays the fanningclosed animation of the effects controls 180-188 by displaying, for adefined interval of time, rotations of different effects controls aboutthe fixed location at different speeds from the effects controls'different starting positions and locations. The effects control 180rotates at the fastest speed about the fixed location, the effectscontrol 182 rotates at the second fastest speed about the fixedlocation, the effects control 184 rotates at the third fastest speedabout the fixed location, the effects control 186 rotates at the fourthfastest speed about the fixed location, and the effects control 188 doesnot rotate about the fixed location.

The image editing application of some embodiments displays the fanningclosed animation of the effects controls 180-188 by displaying rotationsof the effects controls about the fixed location at the same speed fromeffects controls' different starting positions and locations. To displaya fanning closed animation with the effects controls 180-188 moving atthe same speed, the application starts moving different effects controlsat different times (e.g., start moving a particular effects controlafter a defined amount of time). Under this approach, the image editingapplication starts moving the effects control 180 first, the effectscontrol 182 second, the effects control 184 third, the effects control186 fourth, and the effects control 188 last. In some embodiments, theapplication starts moving the effects control 182 second when the firsteffects control 180 is at or near the position of the effects control182. In this way, the effects controls 180 and 182 appear to movetogether as one effects control. The image editing application startsmoving the effects controls 184 and 186 in a similar manner—theapplication starts moving the effects control 184 when the effectscontrols 180 and 182 are at or near the position of the effects control184 and the application starts moving the effects control 186 when theeffects controls 180-184 are at or near the position of the effectscontrol 186.

The third stage 215 illustrates the GUI 100 near the end of the fanningclosed animation of the effects controls 180-188 of the effects tool175. As shown, the effects controls 184 and 186 have stopped rotatingabout the fixed location. The positions of the effects controls 186 and188, which underlap the selected effects control 184, are the sameposition as the position of the selected effects control 184. Theeffects controls 180 and 182 are still rotating counter-clockwise aboutthe fixed location. As shown in the third stage 215, the position ofeffects controls 180-188 is fanned closed more than the position of theeffects controls 180-188 illustrated in the second stage 210.

The fourth stage 220 shows the GUI 100 after the completion of thefanning closed animation of the effects controls 180-188. When the imageediting application displays a fanning closed animation of the set ofeffects controls 180-188, the application displays the effects controlsthat overlap the selected effects control rotating about the fixedlocation past the location and position of the effects controls 188. Thefanning closed animation of the effects controls that overlap theselected effects control end at a position and location that is rotatedapproximately 90 degrees counter-clockwise about the fixed location fromthe location and position at which the effects controls that underlapthe selected effects control and the selected effects control end. Atthe end of the fanning closed animation of the set of the effectscontrols 180-188, the effects controls that overlap the selected effectscontrol appear to hang from the fixed location about which the effectscontrols 180-186 rotated.

For the example illustrated in the fourth stage 220 of FIG. 2, theselected effects control is the effects control 184. Thus, at the end ofthe fanning closed animation, the effects controls 184-188 end at thelocation and position illustrated in the fourth stage 220. In addition,the effects controls 180 and 182, which overlap the selected effectscontrol 184, end at the location and position that is rotatedapproximately 90 degrees counter-clockwise about the fixed location fromthe ending location and position of the effects controls 184-188.

While FIG. 2 illustrates selecting a particular effects control of aneffects tool, one of ordinary skill in the art will recognize that anyof the effects controls of the effects tool may be selected after theeffects tool is activated. For example, the user could have selectedeffects controls 180, 182, 186, or 188.

After selecting an effects control of the effects tool, a user mightwant to change the selection of the effects control. FIG. 3 conceptuallyillustrates changing the selected effects control of the effects tool175 illustrated in FIG. 1. Specifically, FIG. 3 illustrates the GUI 100at four different stages 305-320 of an effects control change operation.

The first stage 305 of the GUI 100 is similar to the fourth stage 220 ofthe GUI 100 illustrated in FIG. 2. That is, the first stage 305 showsthe GUI 100 after the effects control 184 is selected, the effectscontrol 184 is highlighted with a bolded border, and a fanning closedanimation of the set of effects controls 180-188 has completed. Inaddition, the first stage 305 illustrates the invocation of an operationfor changing the selection of the effects control of the effects tool175. As shown, a user is selecting the selectable UI item 190 (e.g., bytouching the UI item 190) to invoke the operation for changing theselection of the effects control.

The second stage 310 illustrates the GUI 100 after the image editingapplication has finished a fanning open animation of the set of effectscontrols 180-188. When the application receives the selection of the UIitem 190, the application displays a fanning open animation of the setof effects controls 180-188 that is similar to the fanning openanimation described above by reference to FIG. 1. As shown, the effectscontrol 184 remains highlighted because the effects control 184 is thecurrent selected effects control of the effects tool 175.

In the third stage 315, the GUI 100 shows a selection of a differenteffects control of the effects tool 175. As shown, the user is selectingthe effects control 180 (e.g., by touching the effects control 180).When the image editing application receives the selection of the effectscontrol 180, the application highlights the effects control 180 anddisplays a fanning closed animation of the set of effects controls180-188 that is similar to the fanning closed animation of the set ofeffects controls 180-188 described above by reference to FIG. 2.

The fourth stage 320 illustrates the GUI 100 after the fanning closedanimation of the set of effects controls 180-188 is finished and theselected effects control 180 is highlighted. In this example, the set ofeffects controls 180-186 rotate about the UI item 190 and end theposition of the selected effects control 190. Since none of the othereffects controls (i.e., the effects controls 182-188) of the effectstool 175 overlap the selected effects control 180, the end positions ofthe effects controls 182-188 are the same as the end position of theselected effects control 180. Therefore, none of the effects controlsappear to hang from the fixed location about which the effects controls180-186 rotated.

FIG. 3 illustrates one example of changing the selected effects controlof an effects tool. One of ordinary skill in the art will realize thatany effects control of the effects tool may be selected when changingthe selected effects control of the effects tool. Moreover, the selectedeffects control of the effects tool may be changed any number ofdifferent times.

In some embodiments, the image editing application provides the GUIdescribed above in FIGS. 1-3 when the application is in alandscape-viewing mode. The following figures will describe a GUI thatthe application of some such embodiments provides when the applicationis in a portrait-viewing mode.

FIG. 4 conceptually illustrates a GUI 400 that includes the effects tool175 of some embodiments and the activation of the effects tool 175. Inparticular, FIG. 4 illustrates the GUI 400 at four different stages405-420 of an effects tool activation operation. The GUI 400 is similarto the GUI 100 that is described above by reference to FIG. 1 except thethumbnail display area 125 in the GUI 400 is arranged below the imagedisplay area 145 and above the toolbar 195. Also, the GUI 400 does notinclude the toolbar 135, and, thus, the UI items 132-140 are displayedin the toolbar 195 instead.

The stages 405-420 of the GUI 400 are similar to the stages 105-120described above by reference to FIG. 1. That is, the first stage 405shows the activation of the effects tool 175, the second stage 410 showsthe start of the fanning open animation of the effects controls 180-188,the third stage 415 shows the effects controls 180-188 near the end ofthe fanning closed animation, and the fourth stage 420 shows the effectscontrols 180-188 at the end of the fanning open animation.

In addition, the fanning closed animation of the effects tool 175 in theGUI 400 when an effects control of the effects tool 175 is similar tothe animation described above by reference to FIG. 2. Also, thetechnique for changing the selection of an effects control of theeffects tool 175 in the GUI 400 and the accompanying animations aresimilar to the technique and animations described above by reference toFIG. 3.

In some embodiments, the GUI for the example operations described aboveby reference to FIGS. 1-3 may be provided by an image editingapplication when the application is in a landscape-viewing mode. Theimage editing application of some embodiments provides GUI describedabove by reference to FIG. 4 for the example operations when theapplication is in a portrait-viewing mode. However, in some cases, theimage editing application provides a yet another GUI for the exampleoperations. For instance, the display screen of a mobile computingdevice (e.g., a smartphone) on which the application is running mightnot have enough space to display the example operations illustrated inFIGS. 1-4.

FIG. 5 conceptually illustrates a GUI 500 of an image editingapplication that includes an effects tool 175 of some embodiments andthe activation of the effects tool 175. Specifically, FIG. 5 illustratesthe GUI 500 at four different stages 505-520 of an effects toolactivation operation.

The GUI 500 is similar to the GUI 100 that is described above byreference to FIG. 1 except the thumbnail display area 125 in the GUI 500is arranged below the image display area 145 and above the toolbar 195.Also, the GUI 500 does not include the toolbar 135, and, thus, the UIitems 132-140 are displayed in the toolbar 195 instead.

The first stage 505 of the GUI 500 shows the activation of the effectstool 175. In this stage, a user is selecting the selectable effects toolUI item 140 (e.g., by touching the UI item 140) to activate the effectstool 175.

The second stage 510 illustrates the GUI 500 after the effects tool 175is activated. As shown, the GUI 500 is displaying the start of thefanning open animation of the set of effects controls 180-188 and theeffects tool UI item 140 is highlighted. When the image editingapplication receives the selection of the effects tool UI item 140, theapplication highlights the UI item 140, removes the UI items 132-140from the toolbar 195 (e.g., by displaying an animation of the UI items132-140 sliding towards the left and off the toolbar 195), and displaysthe UI item 140 on the left side of the toolbar 195.

When the image editing application receives the selection of the effectstool UI item 140, the application also starts displaying the fanningopen animation of the set of effects controls 180-188. For this example,the starting position of the effects controls 180-188 for the fanningopen animation indicated with a dashed rectangle in the toolbar 195. Asthe fanning open animation starts, the image editing applicationdisplays the effects controls 180-186 as rotating clockwise about afixed location (the selectable UI item 190 in this example) relative tothe effects control 188. While fanning open the effects controls180-188, the application also moves the fixed location, and, in turn,the effects controls 180-186, towards the middle of the right side ofthe image display area 145. In other words, the application displays theeffects controls 180-188 fanning open as the application displays theeffects controls 180-188 sliding the effects controls 180-188 up andtowards the middle of the right side of the image display area 145.

The image editing application displays the fanning open animation of theeffects controls 180-188 by displaying rotations of different effectscontrols from the starting position and location by different amountsabout the fixed location. As shown, the effects control 180-186 eachrotates about the fixed location in decreasing amounts relative to theeffects control 188.

In some embodiments, the image editing application displays the fanningopen animation of the effects controls 180-188 by displaying, for adefined interval of time, rotations of different effects controls aboutthe fixed location at different speeds from the starting position andlocation. The interval of time is defined in some embodiments as thetime that the application starts moving the effects controls 180-188from the toolbar 195 until the application stops moving the effectscontrols 180-188 off the middle of the right side of the image displayarea 145. In such embodiments, the effects control 180 rotates at thefastest speed about the fixed location, the effects control 182 rotatesat the second fastest speed about the fixed location, the effectscontrol 184 rotates at the third fastest speed about the fixed location,the effects control 186 rotates at the fourth fastest speed about thefixed location, and the effects control 188 does not rotate about thefixed location.

The image editing application of some embodiments displays the fanningopen animation of the effects controls 180-188 by displaying rotationsof the effects controls about the fixed location at the same speed fromthe starting position and location. To display a fanning open animationwith the effects controls 180-188 moving at the same speed, theapplication starts moving different effects controls at different times(e.g., start moving a particular effects control after a defined amountof time). Under this approach, the application starts moving the effectscontrol 180 first, the effects control 182 second, the effects control184 third, the effects control 186 fourth, and the effects control 188last.

The third stage 515 illustrates the GUI 500 near the end of the fanningopen animation of the effects controls 180-188 of the effects tool 175.As shown, the position of the effects controls 180-188 is fanned openmore than the position of the effects controls 180-188 illustrated inthe second stage 510. Also, the location of the fixed location, and, inturn, the effects controls 180-188, is farther towards the middle of theright side of the image display area 145 than the location of the fixedlocation illustrated in the second stage 510.

The fourth stage 520 shows the GUI 500 after the completion of thefanning open animation of the effects controls 180-188. As shown, theeffects control 180 has rotated approximately 90 degrees clockwise aboutthe fixed location from its starting location and position, the effectscontrol 182 has rotated approximately 67.5 degrees clockwise about thefixed location from its starting location and position, the effectscontrol 184 has rotated approximately 45 degrees clockwise about thefixed location from its starting location and position, and the effectscontrol 186 has rotated approximately 22.5 degrees clockwise about thefixed location from its starting location and position.

FIG. 5 illustrates an example of a fanning open animation of the effectscontrols of an effects tool when the effects tool is activated. In someembodiments, the image editing application does not display a fanningopen animation of the effects controls of the effects tool when theeffects tool is activated. Instead, the application of some suchembodiments displays the last state (e.g., the most recent state) of theeffects tool. For instance, the application might display the selectedeffects control in a manner similar to the fourth stage 620 illustratedin FIG. 6 when the effects tool is activated and an effects control ofthe effects tool is selected in the last state of the effects tool.

FIG. 6 conceptually illustrates selecting an effects control of theeffects tool 175 illustrated in FIG. 5. In particular, FIG. 6illustrates the GUI 500 at four different stages 605-620 of an effectscontrol selection operation.

The first stage 605 of the GUI 500 shows the selection of an effectscontrol of the effects tool 175. As shown, a user is selecting theeffects controls 184 (e.g., by touching the effects control 184). Whenthe image editing application receives the selection of the effectscontrol 184, the application highlights the selected effects control(the effects control 184 in this example) and starts displaying afanning closed animation of the set of effects controls 180-188.

The second stage 610 illustrates the GUI 500 after the effects control184 is selected and the fanning closed animation of the set of effectscontrols 180-188 has started. The application highlights the effectscontrol 184 by bolding the border of the effects control 184. In thisexample, the positions and locations of the set of effects controls180-188 shown in the fourth stage 510 of FIG. 5 are the set of effectscontrols 180-188 s′ starting positions and locations for the fanningclosed animation.

As the fanning closed animation starts, the image editing applicationdisplays the effects controls 180-186 as rotating counter-clockwiseabout the fixed location (e.g., the UI item 190 in this example)relative to the effects control 188. While fanning the effects controls180-188, the application also moves the fixed location, and, in turn,the effects controls 180-188, from the middle of the right side of theimage display area 145 towards the right side of the toolbar 195. Inother words, the application displays the effects controls 180-188fanning closed as the application displays the fixed location slidingfrom the middle of the rights side of the image display area 145 towardsthe right side of the toolbar 195.

The image editing application displays the fanning closed animation ofthe effects controls 180-188 by displaying rotations of differenteffects controls from the effects controls' starting positions andlocations by different amounts about a fixed location. As shown, theeffects control 180-186 each rotates about the fixed location relativeto the effects control 188, which is described above by reference toFIG. 5, in decreasing amounts. The direction of rotation of the effectscontrol 180-186 illustrated in FIG. 6 (counter-clockwise in thisexample) is opposite of the direction of the rotation of the effectscontrol 180-186 during the fanning open animation illustrated in FIG. 5.

In some embodiments, the image editing application displays the fanningclosed animation of the effects controls 180-188 by displaying, for adefined interval of time, rotations of different effects controls aboutthe fixed location at different speeds from the effects controls'different starting positions and locations. The interval of time isdefined in some embodiments as the time that the application startsmoving the fixed location, and, in turn, the effects controls 180-188,from the middle of the right side of the image display area 145 andtowards the right side of the toolbar 195 until the application hasmoved the effects controls 180-188 over the toolbar 195.

The image editing application of some embodiments displays the fanningclosed animation of the effects controls 180-188 by displaying rotationsof the effects controls about the fixed location at the same speed fromeffects controls' different starting positions and locations. To displaya fanning closed animation with the effects controls 180-188 moving atthe same speed, the application starts moving different effects controlsat different times (e.g., start moving a particular effects controlafter a defined amount of time). Under this approach, the image editingapplication starts moving the effects control 180 first, the effectscontrol 182 second, the effects control 184 third, the effects control186 fourth, and the effects control 188 last. In some embodiments, theapplication starts moving the effects control 182 second when the firsteffects control 180 is at or near the position of the effects control182. In this way, the effects controls 180 and 182 appear to movetogether as one effects control. The image editing application startsmoving the effects controls 184 and 186 in a similar manner—theapplication starts moving the effects control 184 when the effectscontrols 180 and 182 are at or near the position of the effects control184 and the application starts moving of the effects control 186 whenthe effects controls 180-184 are at or near the position of the effectscontrol 186.

The third stage 615 illustrates the GUI 500 near the end of the fanningopen animation of the effects controls 180-188 of the effects tool 175.As shown, the position of the effects controls 180-188 is fanned closedmore than the position of the effects controls 180-188 illustrated inthe second stage 610. Also, the location of the fixed location, and, inturn, the effects controls 180-188, is farther towards the right side ofthe toolbar 195 than the location of the fixed location illustrated inthe second stage 610.

The fourth stage 620 shows the GUI 500 after the completion of thefanning closed animation of the effects controls 180-188. When the imageediting application finishes the fanning closed animation, theapplication displays the selected effects control over the toolbar 195.The application also displays the effects controls that overlap theselected effects control in a similar way that is illustrated in thefourth stage 220 of FIG. 2. That is, the image editing applicationdisplays the effects controls that overlap the selected effects controlat a position and location that is rotated approximately 90 degreescounter-clockwise about the selectable UI item 190 from the location andposition at which the application displays the selected effects control.At the end of the fanning closed animation of the set of the effectscontrols 180-188 in the fourth stage 620, the effects controls thatoverlap the selected effects control appear to hang from the selectableUI item 190.

For the example illustrated in the fourth stage 620 of FIG. 6, theselected effects control is the effects control 184. Thus, the imageediting application displays the effects controls 180 and 182, whichoverlap the selected effects control 184, at the location and positionthat is rotated approximately 90 degrees counter-clockwise about the UIitem 190 from the selected effects control 184.

While FIG. 6 illustrates selecting a particular effects control of aneffects tool, one of ordinary skill in the art will recognize that anyof the effects controls of the effects tool may be selected after theeffects tool is activated. For example, the user could have selectedeffects controls 180, 182, 186, or 188.

As mentioned above, after selecting an effects control of the effectstool, a user might want to change the selection of the effects control.FIG. 7 conceptually illustrates changing the selected effects control ofthe effects tool 175 illustrated in FIG. 5. Specifically, FIG. 7illustrates the GUI 500 at four different stages 705-720 of an effectscontrol change operation.

The first stage 705 of the GUI 500 is similar to the fourth stage 620 ofthe GUI 500 illustrated in FIG. 6. That is, the first stage 705 showsthe GUI 500 after the effects control 184 is selected, the effectscontrol 184 is highlighted with a bolded border, a fanning closedanimation of the set of effects controls 180-188 has completed, and theselected effects control 184 is displayed over the toolbar 195. Inaddition, the first stage 705 illustrates the invocation of an operationfor changing the selection of the effects control of the effects tool175. As shown, a user is selecting the selectable UI item 190 (e.g., bytouching the UI item 190) to invoke the operation for changing theselection of the effects control.

The second stage 710 illustrates the GUI 500 after the image editingapplication has finished a fanning open animation of the set of effectscontrols 180-188. When the application receives the selection of the UIitem 190, the application displays a fanning open animation of the setof effects controls 180-188 that is similar to the fanning openanimation described above by reference to FIG. 5. As shown, the effectscontrol 184 remains highlighted because the effects control 184 is thecurrent selected effects control of the effects tool 175.

In the third stage 715, the GUI 100 shows a selection of a differenteffects control of the effects tool 175. As shown, the user is selectingthe effects control 180 (e.g., by touching the effects control 180).When the image editing application receives the selection of the effectscontrol 180, the application removes the highlighting of the previouslyselected effects control 186, highlights the newly selected effectscontrol 180, and displays a fanning closed animation of the set ofeffects controls 180-188 that is similar to the fanning closed animationof the set of effects controls 180-188 described above by reference toFIG. 2.

The fourth stage 720 illustrates the GUI 500 after the fanning closedanimation of the set of effects controls 180-188 is finished and theselected effects control 180 is highlighted and displayed over thetoolbar 195. Since none of the other effects controls (i.e., the effectscontrols 182-188) of the effects tool 175 overlap the selected effectscontrol 180, the end positions of the effects controls 182-188 are thesame as the end position of the selected effects control 180. Therefore,none of the effects controls appear to hang from the UI item 190.

FIG. 7 illustrates one example of changing the selected effects controlof an effects tool. One of ordinary skill in the art will realize thatany effects control of the effects tool may be selected when changingthe selected effects control of the effects tool. Moreover, the selectedeffects control of the effects tool may be changed any number ofdifferent times.

FIGS. 5-7 show example layouts and animations of the effects controls180-188 when the effects controls fan open and closed. In someembodiments, the layouts and animations of the effects controls 180-188illustrated in FIGS. 5-7 are provided when the image editing applicationis in a right-hand mode that facilitates the use of a user's right handto interact with the GUI 500 of the application. In some suchembodiments, when the image editing application is in a left-hand mode,the application provides different layouts and animations of the effectscontrols 180-188 when the effects controls fan open and closed. Forinstance, in the left-hand mode of the application, the image editingapplication of some embodiments displays the fanning open animation in asimilar manner as that shown in FIG. 5 except the effects controlsstarts near the lower left of the image display area 145 and fans opentoward the upper right of the image display area 145 while the effectscontrols move from the left side of the image display area 145 to thecenter of the image display area 145. The left-hand mode of theapplication of such embodiments displays the fanning closed animation ina similar manner as that shown in FIG. 6 except the effects controls fanin towards the lower left of the image display area 145 while theeffects controls move from near the center of the image display area 145to the left side of the image display area 145. In some embodiments, thearrangement of the effects controls 180-188 illustrated in FIGS. 5-7 isprovided when the image editing application is in a left-hand mode andthe arrangement the effects controls 180-188 described above for theleft-hand mode is instead provided when the application is in aright-hand mode. One of ordinary skill in the art will realize that anyof the animations illustrated in the above-described FIGS. 1-7 may beused in any of the GUIs in the above-described FIGS. 1-7.

The FIGS. 1-7 described above show several techniques for fanning UIcontrols open and fanning UI controls closed. For instance, FIGS. 3 and7 show selecting a UI item (the UI item 190 in those examples) to fanopen the UI controls in order to select a different UI control andselecting a UI control to fan closed the UI controls. However, othertechniques may be used to fan open and closed the UI controls in someembodiments. For example, the UI tool of some embodiments allows a userto perform a gesture (e.g., a swipe up gesture) on the selected UIcontrol in order to fan open the UI controls. Similarly, in someembodiments, the UI tool allows the user to perform a gesture (e.g., aswipe down gesture) on the image display area in order to fan closed theUI controls when the UI controls are fanned open and the user does notwant to select a different UI control (i.e., the user wants to keep thecurrent selected UI control as selected). Other techniques are possible.

As noted above, each effects control of an effects tool of someembodiments is for applying a set of effects to an image being edited.Different embodiments of effects tools include different types ofeffects controls. The following FIGS. 8-11 will illustrate severalexamples of different effects tools that include different types ofeffects controls.

FIG. 8 conceptually illustrates the effects tool 175 of some embodimentsthat includes one type of effects controls. As shown, the effects tool175 includes a set of slider controls 880-888. Each of the slidercontrols 880-888 includes a sliding region and a slider that is movablealong an axis of the sliding region in order to adjust an effectassociated with the slider control. In some embodiments, differentpositions of the slider along the sliding region indicate differentextents of an effect associated with the slider control to apply to animage being edited.

FIG. 9 conceptually illustrates the effects tool 175 of some embodimentsthat includes another type of effects controls. FIG. 9 illustrates thatthe effects tool 175 includes a set of thumbnail slider controls980-988. Each of the thumbnail slider controls 980-988 includes a set ofselectable UI items located at different positions along the thumbnailslider control. Each set of selectable UI items are for applyingdifferent extents of an effect associated with a thumbnail slidercontrol to the image being edited (the image 142 in this example).

As shown, each UI item of a thumbnail slider control displays athumbnail image of the image being edited (e.g., a small representationof a full-size version of the image being edited) and an extent of aneffect associated with the thumbnail slider control applied to thethumbnail image. In this example, several of the effects are representedby different types of lines (vertical lines, horizontal lines, anddiagonal lines). The more lines displayed on an image represents agreater extent of the effect that is applied to the image and the lesslines displayed on the image represents a lesser extent of the effectthat is applied to the image.

For instance, the thumbnail slider control 988 is for applying an effectthat is represented by displaying vertical lines on an image. Each UIitem of the thumbnail slider control 988 displays a thumbnail image ofthe image 142 and an extent of the effect associated with the thumbnailslider control 988 applied to the thumbnail image. The leftmost UI itemof the thumbnail slider control 988 does not have any vertical linesdisplayed on its thumbnail image to indicate that a very small extent ofthe effect is applied to the thumbnail image of the leftmost UI item.The second leftmost UI item of the thumbnail slider control 988 has twovertical lines displayed on its thumbnail image to indicate that a smallextent of the effect is applied to the thumbnail image of the secondleftmost UI item. The middle UI item of the thumbnail slider control 988has three vertical lines displayed on its thumbnail image to indicatethat a medium extent of the effect is applied to the thumbnail image ofthe middle UI item. The second rightmost UI item of the thumbnail slidercontrol 988 has six vertical lines displayed on its thumbnail image toindicate that a large extent of the effect is applied to the thumbnailimage of the second rightmost UI item. The rightmost UI item of thethumbnail slider control 988 has eleven vertical lines displayed on itsthumbnail image to indicate that a very large extent of the effect isapplied to the thumbnail image of the rightmost UI item.

FIG. 10 conceptually illustrates the effects tool 175 of someembodiments that includes another type of effects controls. As shown,the effects tool 175 includes a set of multi-slider controls 1080-1088.Each of the multi-slider controls 1080-1088 includes a set of slidercontrols that are similar to the slider control describe above byreference to FIG. 8. In some embodiments, a multi-slider control is forapplying one effect to an image being edited and each of the slidercontrols of the multi-slider control is for adjusting a different aspectof the effect associated with the multi-slider control. This way, thedifferent aspects of an effect associated with a multi-slider controlmay be adjusted using a different slider control of the multi-slidercontrol. In some embodiments, a multi-slider control is for applyingseveral different effects to an image being edited and each of theslider controls of the multi-slider control is for adjusting a differenteffect associated with the multi-slider control.

FIGS. 8-10 described above illustrate effects tool that include the sametype of effects controls. In some embodiments, the effects tool includesseveral different types of effects controls. FIG. 11 conceptuallyillustrates an example of such an effects tool. As shown, FIG. 11conceptually illustrates the effects tool 175 of some embodiments thatincludes a set of effects controls 1180-1188. In particular, the effectscontrols 1180 and 1188 are similar to the slider controls describedabove by reference to FIG. 8, the effects controls 1182 and 1186 aresimilar to the thumbnail slider controls described above by reference toFIG. 9, and the effects control 1184 is similar to the multi-slidercontrols described above by reference to FIG. 10.

FIG. 12 conceptually illustrates a thumbnail slider control 1280 of someembodiments and using the thumbnail slider control 1280 to apply aneffect to an image. Specifically, FIG. 12 illustrates the GUI 100 atfour different stages 1205-1220 of an effect application operation.

The first stage 1205 of the GUI 100 is similar to the fourth stage 220illustrated in FIG. 2 except the effects tool 175 in FIG. 12 includes aset of thumbnail slider controls. As shown, a user has activated theeffects tool 175 (e.g., by selecting the UI item 140), as indicated bythe highlighting of the effects item 140. Additionally, the user hasselected a thumbnail slider control 1280 of the effects tool 175 (e.g.,by touching the thumbnail slider control 1280 when the set of thumbnailslider controls of the effects tool 175 were fanned out).

The thumbnail slider control 1280 is similar to the thumbnail slidercontrols described above by reference to FIG. 9. That is, the thumbnailslider control 1280 includes a set of selectable UI items 1281-1285located at different positions along the thumbnail slider control 1280.The set of selectable UI items 1281-1285 are for applying differentextents of an effect associated with the thumbnail slider control 1280to the image being edited (the image 142 in this example). As shown,each selectable UI item displays a thumbnail image of the image 142 andan extent of an effect associated with the thumbnail slider control 1280applied to the thumbnail image. Each UI item is for applying the effectto the image 142 to the extent that the effect is applied to the UIitem's thumbnail image. In this example, the effect associated with thethumbnail slider control 1280 is represented by diagonal lines that runfrom the lower left to the upper right. The more diagonal linesdisplayed on an image represents a greater extent of the effect that isapplied to the image and the less diagonal lines displayed on the imagerepresents a lesser extent of the effect that is applied to the image.

The second stage 1210 illustrates the GUI 100 after a selectable UI itemof the thumbnail slider control 1280 is selected. Here, the user hasselected the UI item 1282 to apply the effect associated with thethumbnail slider control 1280 to the image 142. The selection of the UIitem 1282 is indicated by a highlighting of the UI item 1282. When theimage editing application receives the selection of the UI item 1282,the application highlights the UI item 1282 and applies the effect tothe image 142 to the extent that the effect is applied to the UI item1282's thumbnail image. As shown in the second stage 1210, threediagonal lines are displayed on image 142, which is the same number ofdiagonal lines displayed on the thumbnail image of the UII item 1282, toindicate that the effect associated with the thumbnail slider control1280 is applied to the image 142.

Some effects may be difficult to notice or an effect is applied to animage at a very small extent. To indicate that an effect is applied toan image, the image editing application of some embodiments displays anindicator (e.g., a highlight) above the effects tool UI item 140 whenthe application applies an effect to the image. As illustrated in thesecond stage 1210, such an indicator is displayed above the effects toolUI item 140 and represented by a thick white line with a black border.The application displays the indicator when the application receives theselection of the UI item 1282. In some embodiments, the applicationcontinues to display the indicator above the effects tool UI item 140 aslong as one or more effects are applied to the image being edited (evenif a different tool is activated).

The third stage 1215 illustrates the GUI 100 after the user has selectedanother selectable UI item of the thumbnail slider control 1280. In thisstage, the user has selected the UI item 1284 (e.g., by touching the UIitem 1284) to apply the effect associated with the thumbnail slidercontrol 1280 to the image 142 in order to increase the extent that theeffect is applied to the image 142. The selection of the UI item 1284 isindicated by a highlighting of the UI item 1284. When the image editingapplication receives the selection of the UI item 1284, the applicationhighlights the UI item 1284, removes the highlighting of the UI item1282, and applies the effect to the image 142 to the same extent thatthe effect is applied to the UI item 1284's thumbnail image. As shown inthe third stage 1215, more diagonal lines are displayed on image 142compared to the number of diagonal lines displayed on the image 142 inthe second stage 1210 to indicate that a larger extent of the effect isapplied to the image 142.

In the fourth stage 1220, the GUI 100 illustrates that the user hasselected another selectable UI item of the thumbnail slider control 1280to change the extent that the effect is applied to the image 142. In thefourth stage 1220, the user has selected the UI item 1281 (e.g., bytouching the UI item 1281) to apply the effect associated with thethumbnail slider control 1280 to the image 142 in order to decrease theextent that the effect is applied to the image 142. The selection of theUI item 1281 is indicated by a highlighting of the UI item 1281. Whenthe image editing application receives the selection of the UI item1281, the application highlights the UI item 1281, removes thehighlighting of the UI item 1284, and applies the effect to the image142 to the same extent that the effect is applied to the UI item 1281'sthumbnail image. As shown, no diagonal lines are displayed on image 142to indicate that a smaller extent of the effect is applied to the image142.

FIG. 12 illustrates a thumbnail slider control that includes a set ofselectable UI items that, when selected, apply a set of defined extentsof an effect to an image being edited. Such a thumbnail slider controlmay also be referred to as a discrete thumbnail slider control. In someembodiments, the application provides a thumbnail slider control forapplying an effect to the image being edited with finer granularity.This thumbnail slider control may be referred to as a continuousthumbnail slider control.

FIG. 13 conceptually illustrates a continuous thumbnail slider control1380 of some embodiments and using the thumbnail slider control 1380 toapply an effect to an image. In particular, FIG. 13 illustrates the GUI100 at four different stages 1305-1320 of an effect applicationoperation.

The first stage 1305 of the GUI 100 is similar to the fourth stage 220illustrated in FIG. 2 except the effects tool 175 in FIG. 13 includes aset of thumbnail slider controls. As shown, a user has activated theeffects tool 175 (e.g., by selecting the UI item 140), as indicated bythe highlighting of the effects item 140. In addition, the user hasselected a thumbnail slider control 1380 of the effects tool 175 (e.g.,by touching the thumbnail slider control 1380 when the set of thumbnailslider controls of the effects tool 175 were fanned out).

As shown, the thumbnail slider control 1380 includes a selectablesliding region 1386 and a set of thumbnail images 1381-1385 located atdifferent positions along the selectable sliding region 1386. Thesliding region 1386 is for applying different extents of an effectassociated with the thumbnail slider control 1380 to the image beingedited (the image 142 in this example). Different locations along thehorizontal axis of the sliding region 1386 are for applying differentextents of the effect to the image being edited. For instance, in someembodiments, a first horizontal end of the sliding region 1386corresponds to little or no effect applied to the image being edited, asecond horizontal end of the sliding region 1386 corresponds to a fullextent of the effect applied to the image being edited, and theincremental horizontal locations from the first end to the second end ofthe sliding region correspond to incremental extents of the effectapplied to the image being edited. In this example, the left side of theselectable sliding region 1386 corresponds to no extent of the effectapplied to the image being edited and the right side of the selectablesliding region 1386 corresponds to a full extent of the effect appliedto the image being edited.

As shown, each of the thumbnail images 1381-1385 displays a thumbnailimage of the image 142 and an extent of an effect associated with thethumbnail slider control 1380 applied to the thumbnail image. In thisexample, the location in the middle of each thumbnail image in theselectable sliding region 1386 corresponds to the extent of the effectthat is applied to the thumbnail image. This way, the thumbnail images1381-1385 provide the user with a visual indication of the extent thatthe effect will be applied to the image being edited when the userselects the middle of the thumbnails. Different embodiments usedifferent locations in the selectable sliding region 1386 relative tothe thumbnail images 1381-1385 to correspond to the extent of the effectthat is applied to the thumbnail images. For instance, some embodimentsmay use the location near the left of each thumbnail image in theselectable sliding region 1386 to correspond to the extent of the effectthat is applied to the thumbnail image.

The second stage 1310 illustrates the GUI 100 after a location on thesliding region 1386 of the thumbnail slider control 1380 is selected.Here, the user has selected a location near the thumbnail image 1382 toapply the effect associated with the thumbnail slider control 1380 tothe image 142. When a location on the sliding region 1386 is select, theimage editing application displays an indicator 1387 that indicates theselected location and highlights the thumbnail closest to the location.As shown, the user has selected a location near the thumbnail image1382. When the application receives the selection of this location, theapplication highlights the thumbnail image 1382 and applies the effectto the image 142 to the extent that corresponds with the selectedlocation. As shown in the second stage 1310, the extent of the effectapplied to the image 142 is similar to the extent that the effect isapplied to the thumbnail image 1382. In this example, since no effect isapplied to the image 142 prior to the second stage 1310, the applicationdisplays an indicator above the effects tool UI item 140 when theapplication receives the selection of the thumbnail image 1382 toindicate that an effect is applied to the image 142.

The third stage 1315 illustrates the GUI 100 after the user has selectedanother location along the selectable sliding region 1386 of thethumbnail slider control 1380. In this stage, the user has selected alocation on the sliding region 1386 to increase the extent that theeffect is applied to the image 142. The user may select the location bycontinuing to touch the sliding region 1386 in the second stage 1310 andsliding along the sliding region 1386 to the location or by touching thelocation on the sliding region 1386.

The selection of the location shown in the third stage 1310 is indicatedby a highlighting of the thumbnail image 1384, which is the thumbnailimage closest to the location. In instances where the user selects thelocation by sliding a finger along the sliding region 1386, theapplication of some embodiments continues to display the indicator 1387at the location that is selected. That is, as the finger is moving alongthe sliding region 1386, the application moves the location of theindicator 1387 along with the finger.

In some embodiments, the application continues to highlight the nearestthumbnail image in the sliding region 1386 while the user is sliding afinger along the sliding region 1386. Thus, the application of suchembodiments highlights the thumbnail image 1383 and removes thehighlighting of the thumbnail image 1382 when the location of thesliding finger is closer to the thumbnail image 1383 than the thumbnailimage 1382. Similarly, the application highlights the thumbnail image1384 and removes the highlighting of the thumbnail image 1383 when thelocation of the sliding finger is closer to the thumbnail image 1384than the thumbnail image 1383.

The application of some embodiments applies the effect to the image 142to the extent that corresponds with the selected location while the useris sliding the finger along the sliding region 1386. As shown in thethird stage 1315, more diagonal lines are displayed on image 142compared to the number of diagonal lines displayed on the image 142 inthe second stage 1310 to indicate that a larger extent of the effect isapplied to the image 142.

In the fourth stage 1320, the GUI 100 illustrates that the user hasselected another location along the selectable sliding region 1386 tochange the extent that the effect is applied to the image 142. In thefourth stage 1320, the user has selected a location on the slidingregion 1386 to reduce the extent that the effect is applied to the image142. The user may select this location by continuing to touch thesliding region 1386 in the third stage 1315 and sliding along thesliding region 1386 to the location or by touching the location on thesliding region 1386.

In some embodiments, the image editing application highlights thethumbnail images 1381-1385, displays the indicator 1387, and applies theeffect to the image 142 in a similar manner described above in the thirdstage 13815. As shown in this stage, no diagonal lines are displayed onimage 142 to indicate that a smaller extent of the effect is applied tothe image 142.

FIGS. 12 and 13 illustrate examples of thumbnail slider controls forcontrolling a single effect that is applied to an image being edited.Details of single effects that may be implemented by a thumbnail slidercontrol are described in concurrently filed U.S. patent application Ser.No. ______, with attorney docket number APLE.P0342, entitled “Method andInterface for Converting Images to Grayscale”; and concurrently filedU.S. patent application Ser. No. ______, with attorney docket numberAPLE.P0341, entitled “Multi Operation Slider”. U.S. patent applicationSer. No. ______, with attorney docket numbers APLE.P0342 and APLE.P0341,are herein incorporated by reference.

In some embodiments, the application provides a thumbnail slider controlfor applying several different effects to an image being edited. FIG. 14conceptually illustrates a thumbnail slider control 1480 of someembodiments and using the thumbnail slider control 1480 to applydifferent effects to an image. Specifically, FIG. 14 illustrates the GUI100 at four different stages 1405-1420 of several effect applicationoperations.

The first stage 1405 of the GUI 100 is similar to the fourth stage 220illustrated in FIG. 2 except the effects tool 175 in FIG. 14 includes aset of thumbnail slider controls. As shown, a user has activated theeffects tool 175 (e.g., by selecting the UI item 140), as indicated bythe highlighting of the effects item 140. In addition, the user hasselected a thumbnail slider control 1480 of the effects tool 175 (e.g.,by touching the thumbnail slider control 1480 when the set of thumbnailslider controls of the effects tool 175 were fanned out).

As shown in FIG. 14, the thumbnail slider control 1480 includes a set ofselectable UI items 1481-1485 located at different positions along thethumbnail slider control 1480. The set of selectable UI items 1481-1485are for applying different effects associated with the thumbnail slidercontrol 1480 to the image being edited (the image 142 in this example).In this example, several of the different effects are represented bydifferent types of lines (vertical lines, horizontal lines,left-to-right diagonal lines, and right-to-left diagonal lines in thisexample). As shown, each selectable UI item displays a thumbnail imageof the image 142 and a different effect applied to the thumbnail image.

In some embodiments, the thumbnail slider control 1480 providesdifferent effects of the same type. For instance, the thumbnail slidercontrol 1480 of some embodiments provides different painting effects,different black and white effects, different color effects, etc. Thethumbnail slider control 1480 provides different types of differenteffects, in some embodiments.

The second stage 1410 illustrates the GUI 100 after a selectable UI itemof the thumbnail slider control 1480 is selected. Here, the user hasselected the UI item 1481 to apply an effect that corresponds to the UIitem 1481 to the image 142. The selection of the UI item 1481 isindicated by a highlighting of the UI item 1481. When the image editingapplication receives the selection of the UI item 1481, the applicationhighlights the UI item 1481 and applies the effect that corresponds tothe UI item 1481 to the image 142. In this example, since no effect isapplied to the image 142 prior to the second stage 1410, the applicationdisplays an indicator above the effects tool UI item 140 when theapplication receives the selection of the UI item 1481 to indicate thatan effect is applied to the image 142.

The third stage 1415 illustrates the GUI 100 after the user has selectedanother selectable UI item of the thumbnail slider control 1280. In thisstage, the user has selected the UI item 1483 (e.g., by touching the UIitem 1483) to apply a different effect associated with the thumbnailslider control 1280 to the image 142. The selection of the UI item 1483is indicated by a highlighting of the UI item 1483. When the imageediting application receives the selection of the UI item 1483, theapplication highlights the UI item 1483, removes the highlighting of theUI item 1481, and applies the effect that corresponds to the UI item1483 to the image 142.

In the fourth stage 1420, the GUI 100 illustrates that the user hasselected another selectable UI item of the thumbnail slider control 1480to change the effect that is applied to the image 142. In the fourthstage 1420, the user has selected the UI item 1485 (e.g., by touchingthe UI item 1485) to apply the effect that corresponds to the UI item1485 to the image 142. The selection of the UI item 1485 is indicated bya highlighting of the UI item 1485. When the image editing applicationreceives the selection of the UI item 1485, the application highlightsthe UI item 1485, removes the highlighting of the UI item 1483, andapplies the effect that corresponds to the UI item 1485 to the image142.

Details of effects that may be implemented by a thumbnail slider controlfor applying different types of effects to an image are described inconcurrently filed U.S. patent application Ser. No. ______, withattorney docket number APLE.P0352, entitled “Overlaid User InterfaceTools for Applying Effects to Image”; U.S. patent application Ser. No.13/602,124, filed Sep. 1, 2012; and U.S. patent application Ser. No.13/602,135, filed Sep. 1, 2012. U.S. patent application Ser. No. ______,with attorney docket number APLE.P0352, and U.S. patent application Ser.Nos. 13/602,124 and 13/602,135 are herein incorporated by reference.

FIG. 15 conceptually illustrates a continuous thumbnail slider control1580 of some embodiments and using the thumbnail slider control 1580 tomultiple effects to an image. In particular, FIG. 15 illustrates the GUI100 at three different stages 1505-1515 of applying multiple effects toan image being edited.

The first stage 1505 of the GUI 100 is similar to the fourth stage 220illustrated in FIG. 2 except the effects tool 175 in FIG. 15 includes aset of thumbnail slider controls. As shown, a user has activated theeffects tool 175 (e.g., by selecting the UI item 140), as indicated bythe highlighting of the effects item 140. In addition, the user hasselected a thumbnail slider control 1580 of the effects tool 175 (e.g.,by touching the thumbnail slider control 1580 when the set of thumbnailslider controls of the effects tool 175 were fanned out).

As shown, the thumbnail slider control 1580 includes a selectablesliding region 1586, a set of thumbnail images 1581-1585 located atdifferent positions along the selectable sliding region 1586, and a setof selectable UI items 1587-1589. The sliding region 1586 is forapplying different extents of an effect associated with the thumbnailslider control 1580 to the image being edited (the image 142 in thisexample). Different locations along the horizontal axis of the slidingregion 1586 are for applying different extents of the effect to theimage being edited. For instance, in some embodiments, a firsthorizontal end of the sliding region 1586 corresponds to little or noeffect applied to the image being edited, a second horizontal end of thesliding region 1586 corresponds to a full extent of the effect appliedto the image being edited, and the incremental horizontal locations fromthe first end to the second end of the sliding region correspond toincremental extents of the effect applied to the image being edited. Inthis example, the left side of the selectable sliding region 1586corresponds to no extent of the effect applied to the image being editedand the right side of the selectable sliding region 1586 corresponds toa full extent of the effect applied to the image being edited.

As shown, each of the thumbnail images 1581-1585 displays a thumbnailimage of the image 142 and an extent of an effect associated with thethumbnail slider control 1580 applied to the thumbnail image. In thisexample, the location in the middle of each thumbnail image in theselectable sliding region 1586 corresponds to the extent of the effectthat is applied to the thumbnail image. This way, the thumbnail images1581-1585 provide the user with a visual indication of the extent thatthe effect will be applied to the image being edited when the userselects the middle of the thumbnails. Different embodiments usedifferent locations in the selectable sliding region 1586 relative tothe thumbnail images 1581-1585 to correspond to the extent of the effectthat is applied to the thumbnail images. For instance, some embodimentsmay use the location near the left of each thumbnail image in theselectable sliding region 1586 to correspond to the extent of the effectthat is applied to the thumbnail image.

The set of selectable UI items 1587-1589 are for applying differenteffects to the image being edited after an effect is applied to theimage using the sliding region 1586. In some embodiment, set ofselectable UI items 1587-1589 may be used to apply the different effectsto the image without having applied effects to the image using thesliding region 1586. Examples of effects include a vignette effect, asepia effect, a grain effect, or any other effect for modifying theappearance of the image. While first stage 1505 shows the GUI 100displaying the set of UI items 1587-1589, the application of someembodiments provides the UI items 1587-1589 after an effect has beenapplied using the sliding region 1586.

The second stage 1510 illustrates the GUI 100 after a location on thesliding region 1586 of the thumbnail slider control 1580 is selected.Here, the user has selected a location near the thumbnail image 1582 toapply the effect associated with the thumbnail slider control 1580 tothe image 142. When a location of the sliding region 1586 is select, theimage editing application displays an indicator 1590 that indicates theselected location and highlights the thumbnail closest to the location.As shown, the user has selected a location near the thumbnail image1582. When the application receives the selection of this location, theapplication highlights the thumbnail image 1582 and applies the effectto the image 142 to the extent that corresponds with the selectedlocation. As shown in the second stage 1510, the extent of the effectapplied to the image 142 is similar to the extent that the effect isapplied to the thumbnail image 1582. In this example, since no effect isapplied to the image 142 prior to the second stage 1510, the applicationdisplays an indicator above the effects tool UI item 140 when theapplication receives the selection of the thumbnail image 1582 toindicate that an effect is applied to the image 142.

The third stage 1515 of the GUI 100 illustrates that the user hasselected one of the selectable UI items for applying and additionaleffect to the image begin edited. As shown, the user has selected the UIitem 1587 (e.g., by touching the UI item 1587) to apply a vignetteeffect to the image 142. The third stage 1515 also shows that thevignette effect applied to the image as indicated by a darkening of thearea around the border of the image 142.

Although FIGS. 12-15 illustrate several examples of thumbnail slidercontrols with thumbnails of an image being edited positioned in astraight line along the thumbnail slider control, different embodimentsposition the thumbnails along the thumbnail slider control differently.For instance, the thumbnail slider control of some embodiments hasthumbnails of an imaged being edited positioned in a curved manner alongthe thumbnail slider control. As another example, thumbnails of theimage being edited may be positioned in a staggered fashion along thethumbnail slider control of some embodiments (e.g., some thumbnailsstaggered up and some thumbnails staggered down). Many other ways ofpositioning thumbnails along a thumbnail slider controls are possible inother embodiments.

The above-described FIGS. 13 and 15 illustrate examples of a continuousthumbnail slider control. Those examples show an indicator thatindicates the selected location and a highlighting of the thumbnailclosest to the location indicated by the indicator. Differentembodiments use different techniques for highlighting the selectedlocation. For example, alternatively or in conjunction with highlightingthe closest thumbnail, the image editing application of some embodimentshighlights the indicator. Other techniques for indicating the selectedlocation are possible.

FIG. 16 conceptually illustrates a process 1600 of some embodiments forgenerating thumbnails for thumbnail slider controls of an effects tool.In some embodiments, the process 1600 is performed when an effects toolis activated (e.g., as shown in the first stages illustrated in FIGS. 1and 5). The process 1600 of some embodiments is performed when theeffects tool is active and a different image is selected for editing(e.g., an image selected from the thumbnail display area 125).

The process 1600 begins by identifying (at 1610) an image from which togenerate thumbnails. In some embodiments, the process 1600 identifiesthe image that is being edited. Referring to FIG. 9 as an example, theprocess 1600 identifies the image 142 since the image 142 is the imagebeing edited (i.e., the image 142 is the image that is displayed in theimage display area 145).

Next, the process 1600 identifies (at 1620) a thumbnail slider controlof an effects tool. Continuing with the example shown in FIG. 9, theprocess 1600 identifies one of the thumbnail slider controls 980-988 ofthe effects tool 175.

The process 1600 then identifies (at 1630) an effect associated with theidentified thumbnail slider control. Different effects may be associatedwith the thumbnail slider control. Examples of different effects includea black and white effect, a sepia effect, a duotone effect, a gradienteffect, a vignette effect, a tilt-shift effect, or any other effect thatcan be applied to an image.

Next, the process 1600 generates (at 1640) a set of thumbnail imagesbased on the identified image and the identified effect. As describedabove, the thumbnail slider control of some embodiments is forcontrolling different extents of a single effect that is applied to animage being edited. In such embodiments, the process 1600 generates aset of thumbnail images of the identified image with different extentsof the identified effect applied to different thumbnail images.

As noted above, in some embodiments, the thumbnail slider control is forapplying several different effects to an image being edited. In theseembodiments, the process 1600 generates a thumbnail image of theidentified image with the one of the different effects applied to thethumbnail image.

After generating the set of thumbnails, the process 1600 determines (at1650) whether any effect is left to process. When the process 1600determines that there is an effect left to process, the process 1600returns to 1630 to continue generating thumbnails for any remainingeffects of the identified thumbnail slider control. For instance, incases where the thumbnail slider control is for applying severaldifferent effects to an image being edited, the process 1600 performs1630 and 1640 for each of the different effects associated with thethumbnail slider control. When the process 1600 determines that there isno effect left to process, the process 1600 proceeds to 1660.

At 1660, the process 1600 determines whether any thumbnail slidercontrol is left to process. When the process 1600 determines that thereis a thumbnail slider control left to process, the process 1600 returnsto 1620 to continue generating thumbnails for any remaining thumbnailslider controls of the effects tool. Referring to FIG. 9 as an example,the process 1600 performs 1620-1650 for each of the thumbnail slidercontrols 980-988. When the process 1600 determines that there is nothumbnail slider control left to process, the process 1600 ends.

FIG. 17 conceptually illustrates a state diagram 1700 of an applicationof some embodiments that provides the effects tool 175. Specifically,FIG. 17 illustrates several states of the application of someembodiments and transitions between these states.

At state 1705, the application is in an image editing, viewing, ororganizing state. In some embodiments, the application begins in thestate 1705 when the application is first started. When the applicationis in the state 1705, the application is providing tools for editing,viewing, or organizing images. For example, the application may beproviding sharing tools for sharing images, providing various editingtools (e.g., a crop and rotate tool, an exposure tool, a color tool,etc.), providing tools for tagging images, etc.

When the application activates the effects tool 175 while theapplication is in a landscape-viewing mode, the application transitionsfrom state 1705 to state 1710. When the application activates theeffects tool 175 while the application is in a portrait-viewing mode,the application transitions from state 1705 to state 1715. In somecases, when the application activates the effects tool 175, theapplication returns to the last used state. In some such cases, theapplication transitions from state 1705 to state 1720 if the applicationis in a landscape-viewing mode and transitions from state 1705 to state1725 if the application is in a portrait-viewing mode (not shown in FIG.17). As shown in FIG. 17, when the application is in any of the states1710-1725 and the application disables the effects tool 175 (e.g., byactivating another tool), the application returns to state 1705.

At state 1710, the application is in a landscape-viewing mode andprovides a GUI for displaying the effects controls of the effects tool175 in a fanned open layout. For instance, the application of someembodiments provides the GUI illustrated in the fourth stage 120 of FIG.1 when in state 1710.

When the application changes to state 1710 (e.g., from state 1715 orstate 1720), the application displays a fanning open animation of theeffects controls of the effects tool 175. In some embodiments, theapplication displays the fanning open animation similar to the animationdescribed above by reference to FIG. 1.

If an effects control of the effects tool 175 is selected when theapplication transitions to state 1710 (e.g., the applicationtransitioned from state 1720), the application continues to highlightthe selected effects control while in state 1710. When the applicationis in state 1710 and the application receives a selection of an effectscontrol of the effects tool 175, the application transitions to state1720. When the application is in state 1710 and the application changesfrom a landscape-viewing mode to a portrait-viewing mode, theapplication transitions to state 1715. For example, when the orientationof the display screen of a mobile computing device on which theapplication is running is changed, the application of some embodimentschanges from a landscape-viewing mode to a portrait-viewing mode andthen transitions to state 1715. As another example, when a display areafor displaying the GUI of the application is adjusted (e.g., adjustingthe size of the display area, decreasing the width of the display area,increasing the height of the display area, etc.), the application ofsome embodiments changes from a landscape-viewing mode to aportrait-viewing mode and then transitions to state 1715.

At state 1720, the application is in a landscape-viewing mode andprovides a GUI for displaying the effects controls of the effects tool175 in a fanned open layout. For instance, the application of someembodiments provides the GUI illustrated in the fourth stage 220 of FIG.2 when in state 1710.

When the application changes to state 1720 from state 1710, theapplication displays a fanning closed animation of the effects controlsof the effects tool 175. In some embodiments, the application displaysthe fanning closed animation similar to the animation described above byreference to FIG. 2. When the application transitions to state 1720, theapplication highlights the selected effects control of the effects tool175.

When the application is in state 1720 and the application receives aselection of a UI item (e.g., the UI item 190) for fanning open theeffects controls of the effects tool 175, the application transitions tostate 1710. When the application is in state 1720 and the applicationchanges from a landscape-viewing mode to a portrait-viewing mode, theapplication transitions to state 1725. For example, when the orientationof the display screen of a mobile computing device on which theapplication is running is changed, the application of some embodimentschanges from a landscape-viewing mode to a portrait-viewing mode andthen transitions to state 1725. As another example, when a display areafor displaying the GUI of the application is adjusted (e.g., adjustingthe size of the display area, decreasing the width of the display area,increasing the height of the display area, etc.), the application ofsome embodiments changes from a landscape-viewing mode to aportrait-viewing mode and then transitions to state 1725.

When the application is in state 1720 and the application receives input(e.g., touch input) through the selected effects control of the effectstool 175, the application transitions to state 1730. Referring to FIG.12 as an example, when the application is in state 1720, the applicationmight receive a selection of a selectable UI item of the thumbnailslider control 1280 to apply an extent of an effect associated with thethumbnail slider control 1280 to the image being edited. Referring toFIG. 13 as another example, when the application is in state 1720, theapplication might receive a sliding gesture through the selectablesliding region 1386 of the thumbnail slider control 1380 in order toapply an extent of an effect associated with the thumbnail slidercontrol 1380 to the image being edited.

At state 1715, the application is in a portrait-viewing mode andprovides a GUI for displaying the effects controls of the effects tool175 in a fanned open layout. For instance, the application of someembodiments provides the GUI illustrated in the fourth stage 520 of FIG.5 when in state 1715.

When the application changes to state 1715 (e.g., from state 1710 orstate 1725), the application displays a fanning open animation of theeffects controls of the effects tool 175. In some embodiments, theapplication displays the fanning open animation similar to the animationdescribed above by reference to FIG. 5.

If an effects control of the effects tool 175 is selected when theapplication transitions to state 1715 (e.g., the applicationtransitioned from state 1725), the application continues to highlightthe selected effects control while in state 1715. When the applicationis in state 1715 and the application receives a selection of an effectscontrol of the effects tool 175, the application transitions to state1725. When the application is in state 1715 and the application changesthe viewing mode from a portrait-viewing mode to a landscape-viewingmode, the application transitions to state 1710. For example, when theorientation of the display screen of a mobile computing device on whichthe application is running is changed, the application of someembodiments changes from a portrait-viewing mode to a landscape-viewingmode and then transitions to state 1710. As another example, when adisplay area for displaying the GUI of the application is adjusted(e.g., adjusting the size of the display area, increasing the width ofthe display area, decreasing the height of the display area, etc.), theapplication of some embodiments changes from a portrait-viewing mode toa landscape-viewing mode and then transitions to state 1710.

At state 1725, the application is in a portrait-viewing mode andprovides a GUI for displaying the effects controls of the effects tool175 in a fanned open layout. For instance, the application of someembodiments provides the GUI illustrated in the fourth stage 620 of FIG.6 when in state 1725.

When the application changes to state 1725 from state 1715, theapplication displays a fanning closed animation of the effects controlsof the effects tool 175. In some embodiments, the application displaysthe fanning closed animation similar to the animation described above byreference to FIG. 6. When the application transitions to state 1725, theapplication highlights the selected effects control of the effects tool175.

When the application is in state 1725 and the application receives aselection of a UI item (e.g., the UI item 190) for fanning open theeffects controls of the effects tool 175, the application transitions tostate 1715. When the application is in state 1725 and the applicationchanges from a portrait-viewing mode to a landscape-viewing mode, theapplication transitions to state 1720. For example, when the orientationof the display screen of a mobile computing device on which theapplication is running is changed, the application of some embodimentschanges from a portrait-viewing mode to a landscape-viewing mode andthen transitions to state 1720. As another example, when a display areafor displaying the GUI of the application is adjusted (e.g., adjustingthe size of the display area, increasing the width of the display area,decreasing the height of the display area, etc.), the application ofsome embodiments changes from a portrait-viewing mode to alandscape-viewing mode and then transitions to state 1720.

When the application is in state 1725 and the application receives input(e.g., touch input) through the selected effects control of the effectstool 175, the application transitions to state 1730. Referring to FIG.12 as an example, when the application is in state 1725, the applicationmight receive a selection of a selectable UI item of the thumbnailslider control 1280 to apply an extent of an effect associated with thethumbnail slider control 1280 to the image being edited. Referring toFIG. 13 as another example, when the application is in state 1720, theapplication might receive a sliding gesture through the selectablesliding region 1386 of the thumbnail slider control 1380 in order toapply an extent of an effect associated with the thumbnail slidercontrol 1380 to the image being edited.

At state 1730, the application applies an effect to the image beingedited based on input received through the selected effects control ofthe effects tool 175. For instance, referring to FIG. 12, if theapplication receives a selection of a UI item through the thumbnailslider control 1280 in state 1720 or state 1725, the application, instate 1730, applies the effect associated with the thumbnail slidercontrol 1280 to the image being edited to an extent of the effect thatcorresponds to the selected UI item. As another example, referring toFIG. 13, when the application is in state 1720 or state 1725 and theapplication receives a selection of a location along the selectablesliding region 1386 of the thumbnail slider control 1380, theapplication, in state 1730, applies the effect associated with thethumbnail slider control 1380 to the image being edited to an extentthat corresponds to the selected location along the sliding region 1386.After applying the effect based on the received input through theselected effects control of the effects tool 175, the applicationtransitions back to the state from which the application transitioned tostate 1730. In other words, the application transitions back to state1720 when the application transitions to state 1730 from state 1720 andthe application transitions back to state 1725 when the applicationtransitions to state 1730 from state 1725.

The state diagram illustrated in FIG. 17 shows several different statesof the image editing application of some embodiments. One of ordinaryskill in the art will recognize that the various actions represented bythe states and transitions in FIG. 17 are only a subset of the possibleactions that can be performed in the application, in some embodiments.Additionally, other functions that are not shown may be performed whilein a particular state. For instance, in some embodiments, when the imageediting application is in fanned closed state (e.g., state 1720 or state1725) and the application receives input to apply an effect to the imagebeing edited that does not yet have any effects applied to the image,the application displays an indicator above the effects tool UI item 140to indicate that an effect is applied to the image being edited.

B. Brushes Tool

The above Sub-section A illustrates examples and embodiments of UI toolfor applying effects to an image. The following Sub-section B willillustrate examples and embodiments of a UI tool for applying brusheffects to an image.

FIG. 18 conceptually illustrates the GUI 100 that includes a brushestool 1875 of some embodiments and the activation of the brushes tool1875. Specifically, FIG. 18 illustrates the GUI 100 at four differentstages 1805-1820 of a brushes tool activation operation.

The first stage 1805 of the GUI 100 shows the activation of the brushestool 1875. As shown, a user is selecting the brushes tool UI item 138(e.g., by touching the UI item 138) to activate the brushes tool 1875.

The second stage 1810 illustrates the GUI 100 after the brushes tool1875 is activated. As shown, the GUI 100 is displaying the start of thefanning open animation of brush controls of the brushes tool 1875 andthe UI item 138 is highlighted. As shown, the brushes tool 1875 includesa set of brush controls 1880-1888. Each of the brush controls 1880-1888is for applying a set of brush effects to an image being edited (theimage 142 in this example).

When the image editing application receives the selection of the brushestool UI item 138, the application highlights the UI item 138 and startsdisplaying the fanning open animation of the set of brush controls1880-1888. In this example, the brush controls 1880-1888 start thefanning open animation at the bottom of the image display area 145 froma same vertical position and location, and slide from the bottom of theimage display area 145 towards the center of the image display area 145while fanning open. As shown, the brush controls 1880-1888 are slightlyfanned opened from the vertical position and location.

The image editing application displays the fanning open animation of thebrush controls 1880-1888 by displaying rotations of different brushcontrols by different amounts about a fixed location. As shown, thebrush controls 1880 and 1882 rotate about the fixed location towards theleft in a counter-clockwise direction, with the brush control 1880fanned out more than the brush control 1882. The brush controls 1886 and1888 rotate about the fixed location towards the right in a clockwisemanner, with the brush control 1888 fanned out more than the brushcontrol 1886. The brush control 1884 does not rotate at all.

In some embodiments, the image editing application displays the fanningopen animation of the brush controls 1880-1888 by displaying, for adefined interval of time, rotations of different brush controls aboutthe fixed location at different speeds from the starting position andlocation. The brush controls 1880 and 1888 rotate at the same speedabout the fixed location, and the brush controls 1882 and 1886 rotate atthe same speed about the fixed location. The brush controls 1880 and1888 rotate at a faster speed than the brush controls 1882 and 1886.

The image editing application of some embodiments displays the fanningopen animation of the brush controls 1880-1888 by displaying rotationsof the brush controls about the fixed location at the same speed fromthe starting position and location. To display a fanning open animationwith the brush controls 1880-1888 moving at the same speed, the imageediting application starts moving different brush controls at differenttimes (e.g., start moving a particular brush control after a definedamount of time). Under this approach, the application starts moving thebrush controls 1880 and 1888 and then starts moving the brush controls1882 and 1886 at a later instance in time.

The third stage 1815 illustrates the GUI 100 near the end of the fanningopen animation of the brush controls 1880-1888 of the brushes tool 1875.As shown, the brush controls 1880-1888 are fanned open from the centermore than the position of the brush controls 1880-1888 illustrated inthe second stage 1810. Additionally, the brush controls 1880-1888 haveslid farther up from the bottom of the image display area 145 comparedto the position of the brush controls 1880-1888 shown in the secondstage 1810. That is, between the second stage 1810 and the third stage1815, the image editing application fans the brush controls 1880-1888farther open while sliding the brush controls 1880-1888 farther up fromthe bottom of the image display area 145 towards the center of the imagedisplay area 145.

The fourth stage 1820 shows the GUI 100 after the completion of thefanning open animation of the brush controls 1880-1888. As shown, thebrush controls 1880-1888 are fanned open from the center more than theposition of the brush controls 1880-1888 illustrated in the third stage1815. Also, the brush controls 1880-1888 have slid farther up from thebottom of the image display area 145 compared to the position of thebrush controls 1880-1888 shown in the third stage 1815. That is, betweenthe third stage 1815 and the fourth stage 1820, the image editingapplication fans the brush controls 1880-1888 farther open while slidingthe brush controls 1880-1888 farther up from the bottom of the imagedisplay area 145 towards the center of the image display area 145.

FIG. 18 illustrates an example of a fanning open animation of the brushcontrols of a brushes tool when the brushes tool is activated. In someembodiments, the image editing application does not display a fanningopen animation of the brush controls of the brushes tool when thebrushes tool is activated. Instead, the application of some suchembodiments displays the last state (e.g., the most recent state) of thebrushes tool. For instance, the image editing application might displaythe selected brush control in a manner similar to the fourth stage 1920,which is described below by reference to FIG. 19, when the brushes toolis activated and a brush controls of the brushes tool is selected in thelast state of the brushes tool.

FIG. 19 conceptually illustrates selecting a brush control of thebrushes tool 1875 illustrated in FIG. 18. In particular, FIG. 19illustrates the GUI 100 at four different stages 1905-1920 of a brushcontrol selection operation.

The first stage 1905 of the GUI 100 shows the selection of a brushcontrol of the brushes tool 175. As shown, a user is selecting the brushcontrols 1886 (e.g., by touching the brush control 1886). When the imageediting application receives the selection of the brush control 1886,the application highlights the selected brush control (the brush control1886 in this example) and starts displaying a fanning closed animationof the set of brush controls 1880-1888.

The second stage 1910 illustrates the GUI 100 after the brush control1886 is selected and the fanning closed animation of the set of brushcontrols 1880-1888 has started. The image editing application highlightsthe brush control 1886 by bolding the border of the brush control 1886.In this example, the positions and locations of the set of brushcontrols 1880-1888 shown in the fourth stage 1820 of FIG. 18 are the setof brush controls 1880-1888 s′ starting positions and locations for thefanning closed animation.

The image editing application displays the fanning closed animation ofthe brush controls 1880-1888 by displaying rotations of different brushcontrols by different amounts about a fixed location. As shown, thebrush controls 1880 and 1882 rotate about the fixed location towards theright in a clockwise direction, with the brush control 1880 fanned inmore than the brush control 1882. The brush controls 1886 and 1888rotate about the fixed location towards the left in a counter-clockwisemanner, with the brush control 1888 fanned in more than the brushcontrol 1886. The brush control 1884 does not rotate at all.

In some embodiments, the image editing application displays the fanningclosed animation of the brush controls 1880-1888 by displaying, for adefined interval of time, rotations of different brush controls aboutthe fixed location at different speeds from the starting position andlocation. The brush controls 1880 and 1888 rotate at the same speedabout the fixed location, and the brush controls 1882 and 1886 rotate atthe same speed about the fixed location. The brush controls 1880 and1888 rotate at a faster speed than the brush controls 1882 and 1886.

The image editing application of some embodiments displays the fanningclosed animation of the brush controls 1880-1888 by displaying rotationsof the brush controls about the fixed location at the same speed fromthe starting position and location. To display a fanning open animationwith the brush controls 1880-1888 moving at the same speed, the imageediting application starts the movement of different brush controls atdifferent times (e.g., start moving a particular brush control after adefined amount of time). Under this approach, the application starts themovement of the brush controls 1880 and 1888 and then starts themovement of the brush controls 1882 and 1886 at a later instance intime.

As shown in the second stage 1910, the brush controls 1880-1888 arefanned closed towards the center more than the position of the brushcontrols 1880-1888 illustrated in the first stage 1905. Additionally,the brush controls 1880-1888 have slid farther down from the center ofthe image display area 145 compared to the position of the brushcontrols 1880-1888 shown in the first stage 1905. That is, between thefirst stage 1905 and the second stage 1910, the image editingapplication fans the brush controls 1880-1888 farther closed whilesliding the brush controls 1880-1888 farther down from the center of theimage display area 145 toward the bottom of the image display area 145.

The third stage 1915 illustrates the GUI 100 near the end of the fanningclosed animation of the brush controls 1880-1888 of the brushes tool1875. As shown, the brush controls 1880-1888 are fanned closed towardsthe center more than the position of the brush controls 1880-1888illustrated in the second stage 1910. Additionally, the brush controls1880-1888 have slid farther down from the center of the image displayarea 145 towards the bottom of the image display area 145 compared tothe position of the brush controls 1880-1888 shown in the second stage1910. That is, between the second stage 1910 and the third stage 1915,the image editing application fans the brush controls 1880-1888 fartherclosed while sliding the brush controls 1880-1888 farther down from thecenter of the image display area 145 towards the bottom of the imagedisplay area 145.

The fourth stage 1920 shows the GUI 100 after the completion of thefanning closed animation of the brush controls 1880-1888. As shown, theapplication displays the top portions of the brush controls 1880-1888 inthe toolbar 195. The image editing application displays the selectedbrush control 1886 a defined offset amount higher than the unselectedbrush controls 1880-1884 and 1888.

While FIG. 19 illustrates selecting a particular brush control of abrushes tool, one of ordinary skill in the art will recognize that anyof the brush controls of the brushes tool may be selected after thebrushes tool is activated. For example, the user could have selectedbrush controls 1880, 1882, 1884, or 1888.

After selecting a brush control of the brushes tool, a user might wantto change the selection of the brush control. FIG. 20 conceptuallyillustrates changing the selected brush control of the brushes tool 1875illustrated in FIG. 18. Specifically, FIG. 20 illustrates the GUI 100 atfour different stages 2005-2020 of a brush control change operation.

The first stage 2005 of the GUI 100 is similar to the fourth stage 1920of the GUI 100 illustrated in FIG. 19. That is, the first stage 2005shows the GUI 100 after the brush control 1886 is selected, the brushcontrol 1886 is highlighted with a bolded border, and a fanning closedanimation of the set of brush controls 1880-1888 has completed.

The second stage 2010 of the GUI 100 illustrates a selection of adifferent brush control. As shown, a user is selecting the brush control1882 (e.g., by touching the brush control 1881). When the applicationreceives the selection of the brush control 1882, the applicationremoves the highlighting of the previously selected brush control (thebrush control 1886 in this example) and highlights the newly selectedbrush control (the brush control 1882 in this example). The highlightingof the brush control 1882 is indicated by a bolding of the border of thebrush control 1882.

In the third stage 2015, the GUI 100 shows a selection of another brushcontrol of the brushes tool 1875. As shown, the user is selecting thebrush control 1888 (e.g., by touching the brush control 1888). When theapplication receives the selection of the brush control 1888, theapplication removes the highlighting of the previously selected brushcontrol (the brush control 1882 in this example) and highlights thenewly selected brush control (the brush control 1888 in this example).The highlighting of the brush control 1888 is indicated by a bolding ofthe border of the brush control 1888.

The fourth stage 2020 of the GUI 100 illustrates a selection of anotherbrush control. In this stage, the user is selecting the brush control1886 (e.g., by touching the brush control 1886). When the applicationreceives the selection of the brush control 1886, the applicationremoves the highlighting of the previously selected brush control (thebrush control 1888 in this example) and highlights the selected brushcontrol (the brush control 1886 in this example). The highlighting ofthe brush control 1886 is indicated by a bolding of the border of thebrush control 1886.

FIG. 21 conceptually illustrates another technique for changing theselected brush control of the brushes tool 1875 illustrated in FIG. 18.Specifically, FIG. 21 illustrates the GUI 100 at four different stages2105-2120 of a brush control change operation by fanning open the brushcontrols in order to change the selection of a brush control.

The first stage 2105 of the GUI 100 is similar to the fourth stage 1920of the GUI 100 illustrated in FIG. 19. That is, the first stage 2105shows the GUI 100 after the brush control 1886 is selected, the brushcontrol 1886 is highlighted with a bolded border, and a fanning closedanimation of the set of brush controls 1880-1888 has completed. Inaddition, the first stage 2105 illustrates the invocation of anoperation for changing the selection of the brush control of the brushestool 1875. As shown, a user is selecting the selected brush control 1886to fan open the set of brush controls 1880-1880.

The second stage 2110 illustrates the GUI 100 after the image editingapplication has finished a fanning open animation of the set of brushcontrols 1880-1888. When the application receives the selection of theselected brush control (the brush control 1886 in this example), theapplication displays a fanning open animation of the set of brushcontrols 1880-1888 that is similar to the fanning open animationdescribed above by reference to FIG. 18. As shown, the brush control1886 remains highlighted because the brush control 1886 is the currentselected brush control of the brushes tool 1875.

In the third stage 2115, the GUI 100 shows a selection of a differentbrush control of the brushes tool 1875. As shown, the user is selectingthe brush control 1880 (e.g., by touching the brush control 1880). Whenthe image editing application receives the selection of the brushcontrol 1880, the application highlights the brush control 1880 anddisplays a fanning closed animation of the set of brush controls1880-1888 that is similar to the fanning closed animation of the set ofbrush controls 1880-1888 described above by reference to FIG. 19.

The fourth stage 2120 illustrates the GUI 100 after the fanning closedanimation of the set of brush controls 1880-1888 is finished and theselected brush control 1880 is highlighted. As shown, the applicationdisplays the top portions of the brush controls 1880-1888 in the toolbar195 and displays the selected brush control 1880 a defined offset amounthigher than the unselected brush controls 1882-1888.

FIGS. 20 and 21 illustrate several examples of changing the selectedbrush control of a brushes tool. One of ordinary skill in the art willrealize that any brush control of the brushes tool may be selected whenchanging the selected brush control of the brushes tool. Moreover, theselected brush control of the brushes tool may be changed any number ofdifferent times.

In the figures described above in this Sub-section B, the appearance ofthe brush controls are the same or similar. In some embodiments, thebrush controls of the brushes tool have different appearances torepresent different types of brush controls. FIG. 22 conceptuallyillustrates an example of such a brushes tool. In particular, FIG. 22illustrates the GUI 100 in a stage 2205 with the brush controls of theeffects tool 1875 fanned open and a stage 2210 with the brush controlsof the effects tool 1875 fanned closed. Moreover, any of the operationsdescribed above by reference to FIGS. 18-21 may be performed on thebrushes tool 1875 shown in FIG. 22.

In the stage 2205, the GUI 100 shows the effects tool 1875 with a set ofbrush controls 2280-2287 fanned open. Specifically, in this example, thestage 2205 shows the GUI 100 after the image editing applicationdisplays a fanning open animation of the brush controls 2280-2287similar to the animation described above by reference to FIG. 18.

As shown, the set of brush controls 2280-2287 includes a repair brushcontrol 2280 for removing blemishes from an image being edited, ared-eye brush control 2281 for removing red-eye from the image, asaturate brush control 2282 for increasing the saturation of portions ofthe image, a desaturate brush control 2283 for decreasing the saturationof portions of the image, a lighten brush control 2284 for increasingthe brightness of portions of the image, a darken brush control 2285 fordecreasing the brightness of portions of the image, a sharpen brushcontrol 2286 for sharpening portions of the image, and a soften brushcontrol 2287 for softening and/or blurring portions of the image.Details of brush controls are described in concurrently filed U.S.patent application Ser. No. ______, with attorney docket numberAPLE.P0351, entitled “User Interface Tools for Selectively ApplyingEffects to Image”. U.S. patent application Ser. No. ______, withattorney docket number APLE.P0351, is herein incorporated by reference.

In the stage 2210, the GUI 100 shows the effects tool 1875 with the setof brush controls 2280-2287 fanned closed. For this example, the stage2210 shows the GUI 100 after the image editing application displays afanning closed animation of the brush controls 2280-2287 similar to theanimation described above by reference to FIG. 19. As shown in the stage2210, the top portions of the brush controls 2280-2287 are displayed inthe toolbar 195, the selected brush control (the red-eye brush control2281 in this example) is highlighted, and the selected brush control isdisplayed a defined offset amount above the unselected brush controls.

While FIG. 22 illustrates an example of different appearances for brushcontrols, one of ordinary skill will recognize that a brush control canhave any number of different appearances to represent the brush control.For example, a brush control can appear as a highlighter pen, a pencil,a fountain pen, a paint roller, a paint scraper, etc.

In some embodiments, the image editing application provides the GUIdescribed above in FIGS. 18-22 when the application is in alandscape-viewing mode. The following figures will describe a GUI thatthe application of some such embodiments provides when the applicationis in a portrait-viewing mode.

FIG. 23 conceptually illustrates a GUI 2300 that includes the brushestool 1875 of some embodiments and the activation of the brushes tool1875. Specifically, FIG. 23 illustrates the GUI 2300 at four differentstages 2305-2320 of a brushes tool activation operation. The GUI 2300 issimilar to the GUI 100 that is described above by reference to FIG. 1except the thumbnail display area 125 in the GUI 2300 is arranged belowthe image display area 145 and above the toolbar 195. Also, the GUI 2300does not include the toolbar 135, and, thus, the UI items 132-140 aredisplayed in the toolbar 195 instead.

The stages 2305-2320 of the GUI 2300 are similar to the stages 1805-1820described above by reference to FIG. 18. That is, the first stage 2305shows the activation of the brushes tool 1875, the second stage 2310shows the start of the fanning open animation of the brush controls1880-1888, the third stage 2315 shows the brush controls 1880-1888 nearthe end of the fanning closed animation, and the fourth stage 2320 showsthe brush controls 1880-1888 at the end of the fanning open animation.

FIG. 24 conceptually illustrates selecting a brush control of thebrushes tool 1875 illustrated in FIG. 18. In particular, FIG. 24illustrates the GUI 100 at four different stages 2405-2420 of a brushcontrol selection operation.

The stages 2405-2415 of the GUI 2300 are similar to the stages 1905-1915described above by reference to FIG. 19. That is, the first stage 2405shows the selection of the brush control 1886, the second stage 2410shows the start of the fanning closed animation of the brush controls1880-1888, and the third stage 2415 shows the brush controls 1880-1888near the end of the fanning closed animation,

The fourth stage 2420 shows the GUI 100 after the completion of thefanning closed animation of the brush controls 1880-1888. As shown, theimage editing application displays only the top portion of the selectedbrush control 1886 in the toolbar 195 at the end of the fanning closedanimation of the brush controls 1880-1888. In some embodiments, theapplication uses a technique that is similar to the technique describedabove by reference to FIG. 21 to change the selection of the brushcontrol of the brushes tool. That is, the user selects the selectedbrush control displayed in the tool bar in order to fan open the brushcontrols and then selects a different brush control from the fanned openbrush controls.

In some embodiments, the GUI for the example operations described aboveby reference to FIGS. 18-22 may be provided by an image editingapplication when the application is in a landscape-viewing mode. Theimage editing application of some embodiments provides the GUI describedabove by reference to FIGS. 23 and 24 for the example operations whenthe application is in a portrait-viewing mode. However, in some cases,the image editing application provides a yet another GUI for the exampleoperations. For instance, the display screen of a mobile computingdevice (e.g., a smartphone) on which the application is running mightnot have enough space to display the example operations illustrated inFIGS. 1-4.

FIG. 25 conceptually illustrates the GUI 500 of an image editingapplication that includes the brushes tool 1875 of some embodiments andthe activation of the brushes tool 1875. Specifically, FIG. 25illustrates the GUI 500 at four different stages 2505-2520 of a brushestool activation operation.

The first stage 2505 of the GUI 500 shows the activation of the brushestool 1875. In this stage, a user is selecting the selectable brushestool UI item 138 (e.g., by touching the UI item 138) to activate thebrushes tool 1875.

The second stage 2510 illustrates the GUI 500 after the brushes tool1875 is activated. As shown, the GUI 500 is displaying the start of thefanning open animation of the set of brush controls 1880-1888 and thebrushes tool UI item 138 is highlighted. When the image editingapplication receives the selection of the brushes tool UI item 138, theapplication highlights the UI item 138, removes the UI items 132-140from the toolbar 195 (e.g., by displaying an animation of the UI items132-140 sliding towards the left and off the toolbar 195), and displaysthe UI item 138 on the left side of the toolbar 195.

In this example, the brush controls 1880-1888 start the fanning openanimation at the bottom of the toolbar 195 from a vertical position. Asshown, the brush controls 1880-1888 are slightly fanned opened from thevertical position and location. The image editing application uses anyof the fanning techniques described above by reference to FIG. 18 to fanopen the brush controls 1880-1888. While fanning open the brush controls1880-1888, the application moves a fixed location (e.g., a pivot point),relative to the brush controls 1880-1888, about which the brush controls1880-1888 rotate. The application moves the fixed location towards themiddle of the right side of the image display area 145. While fanningthe brush controls 1880-1888 and moving the fixed location during thefanning open animation, the application also rotates the brushes tool1875 counter-clockwise.

The third stage 2515 illustrates the GUI 500 near the end of the fanningopen animation of the brush controls 1880-1888 of the brushes tool 1875.As shown, the brush controls 1880-1888 are fanned open from the centermore than the position of the brush controls 1880-1888 illustrated inthe second stage 2510. Additionally, the fixed location about which thebrush controls 1880-1888 rotate has moved farther towards the middle ofthe right side of the image display area 145 compared to the position ofthe fixed location in the second stage 2510. Also, the brushes tool 1875has rotated farther in a counter-clockwise manner. That is, between thesecond stage 2510 and the third stage 2515, the image editingapplication fans the brush controls 1880-1888 farther open while movingthe fixed location farther towards the middle of the right side of theimage display area 145 while rotating the brushes tool 195counter-clockwise.

The fourth stage 2520 shows the GUI 500 after the completion of thefanning open animation of the brush controls 1880-1888. As shown, thebrush controls 1880-1888 are fanned open from the center more than theposition of the brush controls 1880-1888 illustrated in the third stage2515. Also, the fixed location about which the brush controls 1880-1888rotate has moved farther towards the middle of the right side of theimage display area 145 compared to the position of the fixed location inthe third stage 2515. Additionally, the brushes tool 1875 has rotatedfarther in a counter-clockwise manner. That is, between the third stage2515 and the fourth stage 2520, the image editing application fans thebrush controls 1880-1888 farther open while moving the fixed locationfarther towards the middle of the right side of the image display area145 while rotating the brushes tool 195 counter-clockwise.

FIG. 25 illustrates an example of a fanning open animation of the brushcontrols of a brushes tool when the brushes tool is activated. In someembodiments, the image editing application does not display a fanningopen animation of the brush controls of the brushes tool when thebrushes tool is activated. Instead, the application of some suchembodiments displays the last state (e.g., the most recent state) of thebrushes tool. For instance, the image editing application might displaythe selected brush control in a manner similar to the fourth stage 2620,which is described below by reference to FIG. 26, when the brushes toolis activated and a brush controls of the brushes tool is selected in thelast state of the brushes tool.

FIG. 26 conceptually illustrates selecting a brush control of thebrushes tool 1875 illustrated in FIG. 25. In particular, FIG. 26illustrates the GUI 500 at four different stages 2605-2620 of a brushcontrol selection operation.

The first stage 2605 of the GUI 500 shows the selection of a brushcontrol of the brushes tool 1875. As shown, a user is selecting thebrush controls 1886 (e.g., by touching the brush control 1886). When theimage editing application receives the selection of the brush control1886, the application highlights the selected brush control (the brushcontrol 1886 in this example) and starts displaying a fanning closedanimation of the set of brush controls 1880-1888.

The second stage 2610 illustrates the GUI 500 after the brush control1886 is selected and the fanning closed animation of the set of brushcontrols 1880-1888 has started. The image editing application highlightsthe brush control 1886 by bolding the border of the brush control 1886.In this example, the positions and locations of the set of brushcontrols 1880-1888 shown in the fourth stage 2520 of FIG. 25 are the setof brush controls 1880-1888 s′ starting positions and locations for thefanning closed animation. As shown, the brush controls 1880-1888 areslightly fanned closed from the brush controls 1880-1888 s′ startingpositions and locations for the fanning closed animation. The imageediting application uses any of the fanning techniques described aboveby reference to FIG. 19 to fan open the brush controls 1880-1888.

The third stage 2615 illustrates the GUI 500 near the end of the fanningclosed animation of the brush controls 1880-1888 of the brushes tool1875. As shown, the brush controls 1880-1888 are fanned closed towardsthe center more than the position of the brush controls 1880-1888illustrated in the second stage 2610. Additionally, the fixed locationabout which the brush controls 1880-1888 rotate has moved farther fromthe middle of the right side of the image display area 145 towards themiddle of the toolbar 195 compared to the position of the brush controls1880-1888 shown in the second stage 2610. Also, the brushes tool 1875has rotated farther in a clockwise manner. That is, between the secondstage 2610 and the third stage 2615, the image editing application fansthe brush controls 1880-1888 farther closed while moving the fixedlocation towards the middle of the toolbar 195 while rotating thebrushes tool 175 clockwise.

The fourth stage 2620 shows the GUI 500 after the completion of thefanning closed animation of the brush controls 1880-1888. As shown, theapplication displays only the top portion of the selected brush control1886 in the toolbar 195 at the end of the fanning closed animation ofthe brush controls 1880-1888. Between the third stage 2615 and thefourth stage 2620, the image editing application fans the brush controls1880-1888 farther closed while moving the fixed location towards themiddle of the toolbar 195 while rotating the brushes tool 175 clockwise.

While FIG. 26 illustrates selecting a particular brush control of abrushes tool, one of ordinary skill in the art will recognize that anyof the brush controls of the brushes tool may be selected after thebrushes tool is activated. For example, the user could have selectedbrush controls 1880, 1882, 1884, or 1888.

FIG. 27 conceptually illustrates another technique for changing theselected brush control of the brushes tool 1875 illustrated in FIG. 25.Specifically, FIG. 27 illustrates the GUI 500 at four different stages2705-2720 of a brush control change operation by fanning open the brushcontrols in order to change the selection of a brush control.

The first stage 2705 of the GUI 500 is similar to the fourth stage 2620of the GUI 500 illustrated in FIG. 26. That is, the first stage 2705shows the GUI 500 after the brush control 1886 is selected, the brushcontrol 1886 is highlighted with a bolded border, a fanning closedanimation of the set of brush controls 1880-1888 has completed, and theselected brush control 1886 is displayed over the toolbar 195. Inaddition, the first stage 2705 illustrates the invocation of anoperation for changing the selection of the brush control of the brushestool 1875. As shown, a user is selecting the selected brush control 1886to fan open the set of brush controls 1880-1880.

The second stage 2710 illustrates the GUI 500 after the image editingapplication has finished a fanning open animation of the set of brushcontrols 1880-1888. When the application receives the selection of theselected brush control (the brush control 1886 in this example), theapplication displays a fanning open animation of the set of brushcontrols 1880-1888 that is similar to the fanning open animationdescribed above by reference to FIG. 25. As shown, the brush control1886 remains highlighted because the brush control 1886 is the selectedbrush control of the brushes tool 1875.

In the third stage 2715, the GUI 500 shows a selection of a differentbrush control of the brushes tool 1875. As shown, the user is selectingthe brush control 1880 (e.g., by touching the brush control 1880). Whenthe image editing application receives the selection of the brushcontrol 1880, the application removes the highlighting of the previouslyselected brush control 1886, highlights the newly selected brush control1880, and displays a fanning closed animation of the set of brushcontrols 1880-1888 that is similar to the fanning closed animation ofthe set of brush controls 1880-1888 described above by reference to FIG.26.

The fourth stage 2720 illustrates the GUI 500 after the fanning closedanimation of the set of brush controls 1880-1888 is finished. As shown,the application displays only a highlighted top portion of the selectedbrush control 1886 in the toolbar 195 at the end of the fanning closedanimation of the brush controls 1880-1888.

FIGS. 25-27 show example layouts and animations of the brush controls1880-1888 when the brush controls fan open and closed. In someembodiments, the layouts and animations of the brush controls 1880-1888illustrated in FIGS. 25-27 are provided when the image editingapplication is in a right-hand mode that facilitates the use of a user'sright hand to interact with the GUI 500 of the application. In some suchembodiments, when the image editing application is in a left-hand mode,the application provides different layouts and animations of the brushcontrols 1880-1888 when the brush controls fan open and closed. Forinstance, in the left-hand mode of the application, the image editingapplication of some embodiments displays the fanning open animation in asimilar manner as that shown in FIG. 25 except the brush controls startsnear the lower left of the image display area 145 and fans open towardthe upper right of the image display area 145 while the brush controlsmove from the left side of the image display area 145 to the center ofthe image display area 145. The left-hand mode of the application ofsuch embodiments displays the fanning closed animation in a similarmanner as that shown in FIG. 6 except the brush controls fan in towardsthe lower left of the image display area 145 while the brush controlsmove from near the center of the image display area 145 to the left sideof the image display area 145. In some embodiments, the arrangement ofthe brush controls 1880-1888 illustrated in FIGS. 25-27 is provided whenthe image editing application is in a left-hand mode and the arrangementthe brush controls 1880-1888 described above for the left-hand mode isinstead provided when the application is in a right-hand mode.

The above FIGS. 25-27 illustrates GUIs that the application of someembodiments provides when the application is in a portrait-viewing mode.One of ordinary skill in the art will realize that the application ofdifferent embodiments provide different GUIs and animations when indifferent viewing modes. For instance, in some embodiments, when theapplication is in a landscape-viewing mode, the application provides aGUI similar to the GUI illustrated in FIGS. 18-21 except the layout ofthe UI items in the toolbars is similar to the toolbars shown in FIGS.25-27 (e.g., only the selected brush controls is displayed when thebrush controls are fanned closed). In some embodiments, the applicationdisplays animations in a similar manner as those shown in FIGS. 18-21.One of ordinary skill in the art will realize that any of the animationsillustrated in the above-described FIGS. 18-27 may be used in any of theGUIs in the above-described FIGS. 18-27.

The FIGS. 18-27 described above show several techniques for fanning UIcontrols open and fanning UI controls closed. For instance, FIGS. 21 and27 show selecting the current selected UI control to fan open the UIcontrols in order to select a different UI control and selecting a UIcontrol to fan closed the UI controls. However, other techniques may beused to fan open and closed the UI controls in some embodiments. Forexample, the UI tool of some embodiments allows a user to perform agesture (e.g., a swipe up gesture) on the selected UI control in orderto fan open the UI controls. Similarly, in some embodiments, the UI toolallows the user to perform a gesture (e.g., a swipe down gesture) on theimage display area in order to fan closed the UI controls when the UIcontrols are fanned open and the user does not want to select adifferent UI control (i.e., the user wants to keep the current selectedUI control as selected). Other techniques are possible.

As noted above, the brush controls of the brushes tool have differentappearances to represent different types of brush controls, in someembodiments. FIG. 28 conceptually illustrates brush controls withdifferent appearances. Specifically, FIG. 28 illustrates the GUI 500 ina stage 2805 with the brush controls of the effects tool 1875 fannedopen and a stage 2810 with the brush controls of the effects tool 1875fanned closed. Moreover, any of the operations described above byreference to FIGS. 25-27 may be performed on the brushes tool 1875 shownin FIG. 28.

The stage 2805 of the GUI 500 shows the effects tool 1875 with the setof brush controls 2280-2287 fanned open. Specifically, in this example,the stage 2805 shows the GUI 500 after the image editing applicationdisplays a fanning open animation of the brush controls 2280-2287similar to the animation described above by reference to FIG. 25.

In the stage 2810, the GUI 100 shows the effects tool 1875 with the setof brush controls 2280-2287 fanned closed. For this example, the stage2810 shows the GUI 500 after the image editing application displays afanning closed animation of the brush controls 2280-2287 similar to theanimation described above by reference to FIG. 26. As shown in the stage2810, only the top portion of the selected brush control (the red-eyebrush control 2881 in this example) is displayed in the toolbar 195, andthe selected brush control is highlighted.

FIG. 29 conceptually illustrates applying a brush effect to an imageusing a brush control of the brushes tool 1875 of some embodiments.Specifically, FIG. 29 illustrates the GUI 100 at four different stages2905-2920 of a brush effect application operation.

The first stage 2905 of the GUI 100 is similar to the fourth stage 1920illustrated in FIG. 19. As shown, a user has activated the brushes tool1875 (e.g., by selecting the UI item 138), as indicated by thehighlighting of the brushes item 138. Additionally, the user hasselected the brush control 1886 of the brushes tool 1875 (e.g., bytouching the brush control 1886 when the set of brush controls of thebrushes tool 1875 were fanned out).

The second stage 2910 of the GUI 100 illustrates a brush effect beingapplied to the image being edited. As shown, the user is selecting aregion of the image 142 (e.g., by touching the region of the image 142and performing a rubbing gesture) to apply the brush effect to theregion of the image 142. When the image editing application receives theselection of the region of the image 142, the application applies thebrush effect associated with the brush control 1886 to the region of theimage 142. In addition, upon receiving the selection of the region ofthe image 142, the application displays an indicator above the brushcontrol 1886 to indicate that a brush effect has been applied to theimage 142 with the brush control 1886 and displays an indicator abovethe brushes tool UI item 138 to indicate that edits have been applied tothe image 142 with the brushes tool 1875.

The third stage 2915 illustrates the GUI 100 after the user has finishedapplying the brush effect to the image 142. As shown, the region of theimage 142 with the brush effect applied is indicated with diagonallines.

The third stage 2915 also shows another brush effect being applied tothe image being edited. As shown, the user is selecting a second regionof the image 142 (e.g., by touching the region of the image 142 andperforming a rubbing gesture) to apply the brush effect associated withthe brush control 1886 to the second region of the image 142. When theimage editing application receives the selection of the second region ofthe image 142, the application applies the brush effect associated withthe brush control 1886 to the second region of the image 142.

The fourth stage 2920 illustrates the GUI 100 after the user hasfinished applying the brush effect to the image 142. As shown, thesecond region of the image 142 with the brush effect applied isindicated with diagonal lines.

FIG. 30 conceptually illustrates applying a brush effect to an imageusing a brush control of the brushes tool 1875 of some embodiments anddisabling the brush effect applied in FIG. 29. In particular, FIG. 30illustrates the GUI 100 at four different stages 3005-3020 of a brusheffect application operation and a brush effect disabling operation.

The first stage 3005 of the GUI 100 is similar to the fourth stage 2920illustrated in FIG. 29. As shown, a user has applied brush effectsassociated with the brush control 1886 to two regions of the image 142,which are indicated by diagonal lines in the image 142. The first stage3005 also shows the user selecting a different brush control. Asillustrated in this stage, the user is selecting the brush control 1882(e.g., by touching the brush control 1882).

The second stage 3010 illustrates the GUI 100 a brush effect beingapplied to the image being edited. As shown, the user is selecting athird region of the image 142 (e.g., by touching the region of the image142 and performing a rubbing gesture) to apply the brush effect to thethird region of the image 142. When the image editing applicationreceives the selection of the region of the image 142, the applicationapplies the brush effect associated with the brush control 1882 to thethird region of the image 142. In addition, upon receiving the selectionof the region of the image 142, the application displays an indicatorabove the brush control 1882 to indicate that a brush effect has beenapplied to the image 142 with the brush control 1882.

The third stage 3015 illustrates the GUI 100 after the user has appliedthe brush effect to the image 142 illustrated in the second stage 3010.As shown, the region of the image 142 with the brush effect applied withthe brush control 1882 is indicated with different diagonal lines.

The third stage 3015 also shows the user disabling the brush effectsapplied to the image 142 with the brush control 1886. In this stage, theuser has selected the brush control 1886 (e.g., by touching the brushcontrol 1886 twice in rapid succession) to disable the brush effectsapplied to the image 142 with the brush control 1886.

The brush effect-disabling feature of the brushes tool 1875 allows theuser to disable and enable brush effects that have been applied to theimage being edited with a particular brush control. This way, the usermay view brush effects applied to the image being edited using differentbrush controls separately. For instance, the user might apply a firstset of brush effects to a region of the image being edited using a firstbrush control and apply a second set of brush effects to the same regionof the image using a second brush control. The brush effect-disablingfeature of the brushes tool 1875 allows the user to view only the firstset of brush effects applied to the image, only the second set of brusheffects applied to the image, or the both the first and second sets ofbrush effects applied to the image.

The fourth stage 3020 illustrates the GUI 100 after the user hasdisabled the brush effects applied to the image 142 with the brushcontrol 1886. As shown, the diagonal lines on the car that representsthe regions at which brush effects were applied to the image 142 withthe brush control 1886 are not displayed in the image 142 in order toindicate that these brush effects have been disabled.

When the image editing application receives the selection of the brushcontrol 1886 to disable the brush effects applied to the image 142 withthe brush control 1886, the application removes the brush effects fromthe regions of the image 142 at which the brush effects have beenapplied. In addition, upon receiving the selection of the brush control1886 to disable the brush effects of the brush control 1886, theapplication displays a different indicator above the brush control 1886.As shown, a thin line displayed above the brush control 1886 is used toindicate that brush effects have been applied to the image 142 with thebrush control 1886 but the brush effects have been disabled.

As described above, FIGS. 29 and 30 illustrate examples of applyingbrush effects to an image using a rubbing gesture (e.g., toincrementally apply brush effects to a region of the image). In someembodiments, brush controls that use rubbing gestures to apply brusheffects are referred to as gradual brush controls, incremental brushcontrols, and/or additive brush controls. Details of brush controls thatuse rubbing gestures to apply the brush effects are described inconcurrently filed U.S. patent application Ser. No. ______, withattorney docket number APLE.P0351, entitled “User Interface Tools forSelectively Applying Effects to Image”. In some embodiments, the brushestool includes other types of brush controls that do not utilize rubbinggestures to apply the brush controls' brush effects. For instance, forthe repair brush control described above, a user removes a blemish froman image by selecting region of an image (e.g., by touching the regionof the image) that contains the blemish. In some embodiments, thered-eye brush control described above is used in a similar manner toremove red-eye from an image. These types of brush controls are referredto as discrete brush controls, in some embodiments.

FIG. 31 conceptually illustrates a state diagram 3100 of an applicationof some embodiments that provides the brushes tool 1875. Specifically,FIG. 31 illustrates several states of the application of someembodiments and transitions between these states.

At state 3105, the application is in an image editing, viewing, ororganizing state. In some embodiments, the application begins in thestate 3105 when the application is first started. When the applicationis in the state 3105, the application is providing tools for editing,viewing, or organizing images. For example, the application may beproviding sharing tools for sharing images, providing various editingtools (e.g., a crop and rotate tool, an exposure tool, a color tool,etc.), providing tools for tagging images, etc.

When the application activates the brushes tool 1875 while theapplication is in a landscape-viewing mode, the application transitionsfrom state 3105 to state 3110. When the application activates thebrushes tool 1875 while the application is in a portrait-viewing mode,the application transitions from state 3105 to state 3115. In somecases, when the application activates the brushes tool 1875, theapplication returns to the last used state. In some such cases, theapplication transitions from state 3105 to state 3120 if the applicationis in a landscape-viewing mode and transitions from state 3105 to state3125 if the application is in a portrait-viewing mode (not shown in FIG.31). As shown in FIG. 31, when the application is in any of the states3110-3125 and the application disables the brushes tool 1875 (e.g., byactivating another tool), the application returns to state 3105.

At state 3110, the application is in a landscape-viewing mode andprovides a GUI for displaying in the landscape-viewing mode the brushcontrols of the brushes tool 1875 in a fanned open layout. For instance,the application of some embodiments provides the GUI illustrated in thefourth stage 1820 of FIG. 18 when in state 3110.

When the application changes to state 3110 (e.g., from state 3115 orstate 3120), the application displays a fanning open animation of thebrush controls of the brushes tool 1875. In some embodiments, theapplication displays the fanning open animation similar to the animationdescribed above by reference to FIG. 18.

If a brush control of the brushes tool 1875 is selected when theapplication transitions to state 3110 (e.g., the applicationtransitioned from state 3120), the application continues to highlightthe selected brush control while in state 3110. When the application isin state 3110 and the application receives a selection of a brushcontrol of the brushes tool 1875, the application transitions to state3120. When the application is in state 3110 and the application changesfrom a landscape-viewing mode to a portrait-viewing mode, theapplication transitions to state 3115. For example, when the orientationof the display screen of a mobile computing device on which theapplication is running is changed, the application of some embodimentschanges from a landscape-viewing mode to a portrait-viewing mode andthen transitions to state 3115. As another example, when a display areafor displaying the GUI of the application is adjusted (e.g., adjustingthe size of the display area, decreasing the width of the display area,increasing the height of the display area, etc.), the application ofsome embodiments changes from a landscape-viewing mode to aportrait-viewing mode and then transitions to state 3115.

At state 3120, the application is in a landscape-viewing mode andprovides a GUI for displaying in the landscape-viewing mode the brushcontrols of the brushes tool 1875 in a fanned closed layout. Forinstance, the application of some embodiments provides the GUIillustrated in the fourth stage 1920 of FIG. 19 when in state 3110.

When the application changes to state 3120 from state 3110, theapplication displays a fanning closed animation of the brush controls ofthe brushes tool 1875. In some embodiments, the application displays thefanning closed animation similar to the animation described above byreference to FIG. 19. When the application transitions to state 3120,the application highlights the selected brush control of the brushestool 1875.

When the application is in state 3120 and the application receives aselection of the selected brush control in order to change the selectionof the brush control of the brushes tool 1875, the applicationtransitions to state 3110. When the application is in state 3120 and theapplication changes from a landscape-viewing mode to a portrait-viewingmode, the application transitions to state 3125. For example, when theorientation of the display screen of a mobile computing device on whichthe application is running is changed, the application of someembodiments changes from a landscape-viewing mode to a portrait-viewingmode and then transitions to state 3125. As another example, when adisplay area for displaying the GUI of the application is adjusted(e.g., adjusting the size of the display area, decreasing the width ofthe display area, increasing the height of the display area, etc.), theapplication of some embodiments changes from a landscape-viewing mode toa portrait-viewing mode and then transitions to state 3125.

In some embodiments, the application receives a selection of a differentbrush control while in state 3120. For instance, the application of someembodiments that provides the GUI illustrated in the fourth stage 1920of FIG. 19 might receive a selection of a different brush to change theselection of the brush control of the brushes tool 1875. When theapplication receives the selection of a different brush while in state3120, the application removes the highlighting from the previouslyselected brush control and highlights the newly selected brush control,as illustrated in FIG. 20.

When the application is in state 3120 and the application receives aselection of a region of an image being edited through the selectedbrush control of the brushes tool 1875, the application transitions tostate 3130. Referring to FIG. 29 as an example, when the application isin state 3120, the application receives a selection of a region of theimage 142 to apply a brush effect associated with the brushes control1886 to the image 142.

At state 3115, the application is in a portrait-viewing mode andprovides a GUI for displaying in the portrait-viewing mode the brushcontrols of the brushes tool 1875 in a fanned open layout. For instance,the application of some embodiments provides the GUI illustrated in thefourth stage 2520 of FIG. 25 or the fourth stage 2320 of FIG. 23 when instate 3115.

When the application changes to state 3115 (e.g., from state 3110 orstate 3125), the application displays a fanning open animation of thebrush controls of the brushes tool 1875. In some embodiments, theapplication displays the fanning open animation similar to the animationdescribed above by reference to FIG. 25 or 23.

If a brush control of the brushes tool 1875 is selected when theapplication transitions to state 3115 (e.g., the applicationtransitioned from state 3125), the application continues to highlightthe selected brush control while in state 3115. When the application isin state 3115 and the application receives a selection of a brushcontrol of the brushes tool 1875, the application transitions to state3125. When the application is in state 3115 and the application changesthe viewing mode from a portrait-viewing mode to a landscape-viewingmode, the application transitions to state 3110. For example, when theorientation of the display screen of a mobile computing device on whichthe application is running is changed, the application of someembodiments changes from a portrait-viewing mode to a landscape-viewingmode and then transitions to state 3110. As another example, when adisplay area for displaying the GUI of the application is adjusted(e.g., adjusting the size of the display area, increasing the width ofthe display area, decreasing the height of the display area, etc.), theapplication of some embodiments changes from a portrait-viewing mode toa landscape-viewing mode and then transitions to state 3110.

At state 3155, the application is in a portrait-viewing mode andprovides a GUI for displaying in the portrait-viewing mode the brushcontrols of the brushes tool 1875 in a fanned open layout. For instance,the application of some embodiments provides the GUI illustrated in thefourth stage 2620 of FIG. 26 or the fourth stage 2420 of FIG. 24 when instate 3155

When the application changes to state 3125 from state 3115, theapplication displays a fanning closed animation of the brush controls ofthe brushes tool 1875. In some embodiments, the application displays thefanning closed animation similar to the animation described above byreference to FIG. 26 or 24. When the application transitions to state3125, the application highlights the selected brush control of thebrushes tool 1875.

When the application is in state 3125 and the application receives aselection of the selected brush control in order to change the selectionof the brush control of the brushes tool 1875, the applicationtransitions to state 3115. When the application is in state 3125 and theapplication changes from a portrait-viewing mode to a landscape-viewingmode, the application transitions to state 3120. For example, when theorientation of the display screen of a mobile computing device on whichthe application is running is changed, the application of someembodiments changes from a portrait-viewing mode to a landscape-viewingmode and then transitions to state 3120. As another example, when adisplay area for displaying the GUI of the application is adjusted(e.g., adjusting the size of the display area, increasing the width ofthe display area, decreasing the height of the display area, etc.), theapplication of some embodiments changes from a portrait-viewing mode toa landscape-viewing mode and then transitions to state 3120.

When the application is in state 3125 and the application receives aselection of a region of an image being edited through the selectedbrush control of the brushes tool 1875, the application transitions tostate 3130. Referring to FIG. 29 as an example, when the application isin state 3120, the application receives a selection of a region of theimage 142 to apply a brush effect associated with the brushes control1886 to the image 142.

At state 3130, the application applies a brush effect to the image beingedited based on the selection of the image received through the selectedbrush control of the brushes tool 1875. For instance, referring to FIG.29, when the application (while in state 3120 or state 3125) receivesthe selection of the region of the image 142 shown in the second stage2910 using the selected brush control 1886, the application, in state3130, applies the brush effect associated with brush control 1886 to theimage being edited. After applying the brush effect based on theselection of the region of the image being edited, the applicationtransitions back to the state from which the application transitioned tostate 3130. In other words, the application transitions back to state3120 when the application transitions to state 3130 from state 3120 andthe application transitions back to state 3125 when the applicationtransitions to state 3130 from state 3125.

The state diagram illustrated in FIG. 31 shows several different statesof the image editing application of some embodiments. One of ordinaryskill in the art will recognize that the various actions represented bythe states and transitions in FIG. 31 are only a subset of the possibleactions that can be performed in the application, in some embodiments.Additionally, other functions that are not shown may be performed whilein a particular state. For instance, in some embodiments, when the imageediting application is in fanned closed state (e.g., state 3120 or state3125) and the application receives input to apply a brush effect to theimage being edited that does not yet have any brush effects applied tothe image, the application displays an indicator above the brushes toolUI item 138 to indicate that a brush effect is applied to the imagebeing edited. As another example, when the image editing application isin a fanned closed state (e.g., state 3120), the application mightreceive a selection of a brush control to disable or enable brusheffects associated with the brush control, as illustrated in FIG. 30.

FIG. 32 conceptually illustrates a software architecture of an imageediting application 3200 of some embodiments that provides UI tool thatinclude fanning UI controls. In some embodiments, the image editingapplication 3200 is a stand-alone application or is integrated intoanother application (e.g., a compositing application), while in otherembodiments the image editing application 3200 might be implementedwithin an operating system. Furthermore, in some embodiments, the imageediting application 3200 is provided as part of a server-based solution.In some such embodiments, the image editing application 3200 is providedvia a thin client. That is, the image editing application 3200 runs on aserver while a user interacts with the image editing application 3200via a separate machine remote from the server. In other suchembodiments, the image editing application 3200 is provided via a thickclient. That is, the image editing application 3200 is distributed fromthe server to the client machine and runs on the client machine.

As shown in FIG. 32, the image editing application 3200 includes a userinterface (UI) interaction and generation module 3205, a viewing modemodule 3265, a UI control animator 3215, a UI control manager 3220, anda rendering engine 3225. The image editing application 3200 alsoincludes effects controls storage 3230, brush controls storage 3235,other controls storage 3240, and image data 3245.

The effects controls storage 3230 stores information about effectscontrols, such as different effects, types of UI controls forcontrolling the effects, etc. Similarly, the brush controls storage 3235stores information about brush controls, such as different brusheffects, types of UI controls for controlling the brush effects, etc.The other controls storage 3230 stores information about additionaland/or other controls (e.g., color controls for adjusting colors ofimages, exposure controls for adjusting the exposure of images, etc., aswell as types of UI controls for controlling the other controls, etc.The image data storage 3245 stores image data (e.g., RAW image files,JPEG image files, thumbnail versions of images, edited versions ofimages, display resolution versions of image, other generated versionsof images, etc.) that a user views, edits, and organizes with the imageediting application 3200. In some embodiments, the storages 3230-3245are stored in one physical storage while, in some embodiments, thestorages are stored on separate physical storages. Still, in someembodiments, some of the storages 3230-3245 are stored in one physicalstorage while other storages 3230-3245 are stored in separate physicalstorages.

FIG. 32 also illustrates an operating system 3250 that includesgyroscope device driver 3255, input device driver(s) 3260, and displaymodule 3265. In some embodiments, as illustrated, the gyroscope devicedriver 3255, device drivers 3260, and display module 3265 are part ofthe operating system 3250 even when the image editing application 3200is an application separate from the operating system 3250.

The gyroscope device driver 3255 includes a set of drivers fortranslating signals from a gyroscope that is part of a computing deviceon which the application 3200 runs. The gyroscope, in some embodiments,is used to identify the orientation of the device. For instance, thegyroscope is used to determine whether the device is being held in alandscape or portrait position. The gyroscope sends signals to thegyroscope device driver 3255, which provides the signals to the viewingmode module 3210. The input device drivers 3260 may include drivers fortranslating signals from a keyboard, mouse, touchpad, tablet,touchscreen, etc. A user interacts with one or more of these inputdevices, which send signals to their corresponding device driver. Thedevice driver then translates the signals into user input data that isprovided to the UI interaction module 3205.

The present application describes several graphical user interfaces thatprovide users with numerous ways to perform different sets of operationsand functionalities. In some embodiments, these operations andfunctionalities are performed based on different commands that arereceived from users through different input devices. For example, thepresent application illustrates the use of touch control to control(e.g., select, move) objects in the graphical user interface. In someembodiments, touch control is implemented through an input device thatcan detect the presence and location of touch on a display of thedevice. An example of such a device is a touch screen device. In someembodiments, with touch control, a user can directly manipulate objectsby interacting with the graphical user interface that is displayed onthe display of the touch screen device. For instance, a user can selecta particular object in the graphical user interface by simply touchingthat particular object on the display of the touch screen device. Assuch, when touch control is utilized, a cursor may not even be providedfor enabling selection of an object of a graphical user interface insome embodiments. However, when a cursor is provided in a graphical userinterface, touch control can be used to control the cursor in someembodiments. Additionally, in some embodiments, objects in a graphicaluser interface can also be controlled or manipulated through othercontrols, such as a cursor in a graphical user interface (e.g., using atrackpad, touchpad, mouse, etc.).

The display module 3265 translates the output of a user interface for adisplay device. That is, the display module 3265 receives signals (e.g.,from the UI interaction and generation module 3205) describing whatshould be displayed and translates these signals into pixel informationthat is sent to the display device. The display device may be an LCD,plasma screen, CRT monitor, touchscreen, etc.

The UI interaction and generation module 3205 of the image editingapplication 3200 interprets the user input data received from the inputdevice drivers 3260 and passes it to various modules, including theviewing mode module 3210, the UI control manager 3220, and the renderingengine 3225. The UI interaction module 3205 also manages the display ofthe UI (e.g., fanning animations of UI controls, highlights of UIelements, indicators, etc.), and outputs this display information to thedisplay module 3265. This UI display information may be based oninformation from the UI control manager 3220 and the rending module3225, etc. In addition, the UI interaction module 3205 may generateportions of the UI based just on user input—e.g., when a user moves anitem in the UI that only affect the display, not any of the othermodules, such as moving a window from one side of the UI to the other.

The viewing mode module 3210 determines a viewing mode for theapplication based on information the viewing mode module 3210 receivesfrom the gyroscope device driver 3255 and sends the determination to theUI interaction and generation module 3205 so that the UI interaction andgeneration module 3205 provides the appropriate UI display informationto the display module 3265

Alternatively, or in conjunction with the information from the gyroscopedevice driver 3255, the viewing mode module 3210 of some embodimentsuses information from the UI interaction and generation module 3205 todetermine the viewing mode. For instance, when the user modifies thedisplay area (e.g., adjusting the size of the display area, adjustingthe width of the display area, adjusting the height of the display area,moving the display area, etc.) in which the application displays theGUI, the application might determine that new viewing mode. As describedabove, the application of some embodiments provides different GUI fordifferent operations in different viewing modes (e.g., landscape-viewingmode, portrait-viewing mode

The UI control animator 3215 generates animations for the UI controlmanager 3220 based on information from the viewing mode module 3210 andthe UI control manager 3220. When the UI control manager 3220 requestsan animation of UI controls (e.g., animations of fanning in/out ofeffects controls, animations of fanning in/out of brush controls,peeling on/off animations, etc.), the UI control animator 3215 retrievesviewing mode information from the viewing mode in order to generate theappropriate animation for the UI control manager 3220.

The UI control manager 3220 provides UI controls for the UI interactionand generation module 3205 to send to the display module 3265 todisplay. For instance, when the user activates a UI tool, such as abrushes tool or an effects tool, the UI control manager 3220 receivesfrom the UI interaction and generation module 3205 a request for theappropriate UI controls. The UI control manager 3220 then sends arequest to the UI control animator 3215 for an animation of the UIcontrols.

The rendering engine 3225 is responsible for rending different versionsof images based on the original image. For instance, the renderingmodule 3225 uses the image data in the image data storage 3245 to renderthumbnails of images and display resolution versions of the images forthe UI interaction and generation module 3205 to send to the displaymodule 3265 to display in a GUI. When edits are made to an image, therendering engine 3225 generates edited thumbnail and display resolutionversions of the image based on the image data in the image data storage3245. In some embodiments, the rendering engine receives requests fromthe UI control manager 3220 to generate images for UI controls (e.g.,thumbnail slider controls). The rendering engine 3225 also rendersimages when the application of some embodiments exports images to anexternal source. In some cases, the rendering engine 3225 renders thefull-size version of original image.

While many of the features have been described as being performed by onemodule (e.g., the UI interaction module 3205, the UI control animator3215, etc.), one of ordinary skill in the art will recognize that thefunctions described herein might be split up into multiple modules.Similarly, functions described as being performed by multiple differentmodules might be performed by a single module in some embodiments (e.g.,the UI control animator 3215 and the UI control manager 3220).

II. Ordered Edit Processing for Non-Destructive Images

The image editing application of some embodiments provides various toolsfor editing an image. As described above, the application of some suchembodiments provides a crop tool, an exposure tool, a color tool, abrush tool, and an effects tool for editing an image. In someembodiments, when different edits are made to the image using differenttools, the application applies the different edits in a particularorder. The following section will describe several example operationsfor facilitating the application of different edits to an image that aremade using different tools in a particular order.

FIGS. 33 a-33 c conceptually illustrate an example of an ordered editoperation according to some embodiments. Specifically, FIGS. 33 a-33 cillustrate the GUI 100 at ten different stages 3305-3350 of an orderededit operation.

The first stage 3305 of the GUI 100 is similar to the first stage 1205of the GUI 100 illustrated in FIG. 12 except a crop tool has been usedto crop the lower left portion of the image 142, as indicated by anindicate displayed above the crop tool UI item 132. Details of croptools are described in concurrently filed U.S. patent application Ser.No. ______, with attorney docket number APLE.P0350, entitled “UserInterface Tools for Cropping and Straightening Image”. U.S. patentapplication Ser. No. ______, with attorney docket number APLE.P0350, isherein incorporated by reference.

Also, the first stage 3305 illustrates a selection of a selectable UIitem of the effects control 1280. As shown, a user is selecting the UIitem 1282 (e.g., by touching the UI item 1282) to apply the effectassociated with the thumbnail slider control 1280 to the cropped image142.

The second stage 3310 shows the GUI 100 after the effect selected in thefirst stage 3305 is applied to the cropped image 142. The applicationdisplays an indicator above the effects tool UI item 140 to indicatethat an effect has been applied to the image being edited. As shown, theeffect is indicated by diagonal lines on the cropped image 142. Thesecond stage 3310 also illustrates the activation of color tool. Asshown, the user is selecting the color tool UI item 136 (e.g., bytouching the UI item 136) in order to activate the color tool.

The third stage 3315 illustrates the GUI 100 after the color tool isactivated. As shown, the color tool includes a set of color adjustmentslider controls 3351-3354 for performing various color adjustment to theimage being edited and a UI item 3355 for providing various whitebalance tools (not shown in FIGS. 33 a-33 c). Details of color toolsthat include color adjustment controls are described in concurrentlyfiled U.S. patent application Ser. No. ______, with attorney docketnumber APLE.P0357, entitled “Context Aware User Interface for ImageEditing”. U.S. patent application Ser. No. ______, with attorney docketnumber APLE.P0357, is herein incorporated by reference.

The third stage 3315 of the GUI 100 also shows that the effects tool UIitem 140 is no longer highlighted and that the color tool UI item 136 ishighlighted to indicate that the color tool is activated. When the imageediting application receives the selection of the color tool UI item136, the application removes the highlighting from the effects tool UIitem 140 and highlights the color tool UI item 136.

In this example, the application applies color adjustment edits to theimage before applying effects edits to the image. Thus, in this example,the application temporarily removes the effects edits applied to thecropped image 142 when the color tool is activated. As shown, theapplication indicates the removal of the effects edits from the croppedimage 142 by displaying an animation that is referred to as a peelingoff animation. The peeling off animation shows a layer of the croppedimage 142, with the effects edits applied to the layer, being removedfrom the cropped image 142. While displaying the peeling off animation,the application displays a version of the image 142 without the effectsedits applied to the image 142, underneath the layer being removed. Inother words, the application displays an animation that appears like thelayer with the effects edits is being peeled away from the cropped image142, starting from the lower right corner of the cropped image 142towards the upper left corner of the cropped image 142.

The fourth stage 3320 shows the GUI 100 near the end of the peeling offanimation. Here, the GUI 100 displays the layer being peeled from thecropped image 142 farther from the lower right corner of the image andfarther towards the upper left corner of the image.

The fifth stage 3325 illustrates the GUI 100 after the peeling offanimation of the effects edits is completed. As shown, the GUI 100displays the cropped image 142 with the effects edits removed from theimage, as illustrated by the diagonal lines no longer displayed. Thefifth stage 3325 also shows a different highlighting of the effects toolUI item 140 and the indicator above the UI item 140. This differenthighlighting is to indicate that effects edits have been applied to theimage being edited but the effects are currently removed. When the imageediting application finishes displaying the peeling off animation, theapplication displays the different highlighting of the effects tool UIitem 140 and the indicator above the UI item 140.

The sixth stage 3330 of the GUI 100 shows color adjustment edits beingapplied to the image. As shown, the user is adjusting the coloradjustment slider control 3351 (e.g., by touching the slider anddragging along the color adjustment slider control 3351) in order toadjust colors of the cropped image 142. The color adjustments in thisexample are represented by a different set of diagonal lines displayedon the cropped image 142. Additionally, a different highlighting isdisplayed above the color tool UI item 136 to indicate that coloradjustments have been applied to the cropped image 142.

In the seventh stage 3335, the GUI 100 is showing that the user isfinished adjusting the color of the image being edited with the colortool. In this stage, the user has increased the color adjustment of thecropped image 142 from the color adjustment shown in the sixth stage3330, as indicated by an increase in the different diagonal linesdisplayed over the cropped image 142.

The seventh stage 3335 also illustrates the activation of the effectstool 175. As shown, the user is selecting the effects tool UI item 140(e.g., by touching the UI item 140) to activate the effects tool 175.

The eighth stage 3340 illustrates the GUI 100 after the effects tool 175is activated. The eighth stage 3340 of the GUI 100 also shows that thecolor tool UI item 136 is no longer highlighted and that the effectstool UI item 140 is highlighted to indicate that the effects tool isactivated. When the image editing application receives the selection ofthe effects tool UI item 140, the application removes the highlightingfrom the color tool UI item 136 and highlights the effects tool UI item140. The application continues to display the different highlightingabove the effects tool UI item 140 to indicate that the effects editsare still currently removed.

As mentioned above, the application in this example applies coloradjustment edits to the image before applying effects edits to theimage. Since the user has finished making color edits to the image, theapplication in this example applies the effects edits that weretemporarily removed from to the cropped image 142 when the color toolwas activated in the second stage 3310. As shown, the applicationindicates the application of the effects edits to the cropped image 142by displaying an animation that is referred to as a peeling onanimation. The peeling on animation shows a layer of the cropped image142, with the color edits and the effects edits applied to the layer,being placed over the color adjusted cropped image 142. Thus, theapplication displays an animation that appears like the layer with thecolor edits and the effects edits is being pasted on to the croppedimage 142 starting from the upper left corner of the cropped image 142towards the lower right corner of the cropped image 142.

The ninth stage 3345 shows the GUI 100 near the end of the peeling onanimation. In the ninth stage 3345, the GUI 100 displays the layer beingplace over the cropped image 142 farther from the upper left corner ofthe image and farther towards the lower right corner of the image. Also,the application continues to display the different highlighting abovethe effects tool UI item 140 to indicate that the effects edits arestill currently removed.

The tenth stage 3350 illustrates the GUI 100 after the peeling onanimation is completed. As shown, the effects edits that weretemporarily removed have been applied to the cropped image 142. This isindicated by the display of the different types of diagonal lines on thecropped image 142. Here, the application displays the originalhighlighting above the effects tool UI item 140 to indicate that theeffects edits have been applied to the image being edited.

The above-described figures illustrate an example operation of applyingdifferent edits made with different tools to an image in a particularorder. In some embodiments, different edits made with the same tool toan image are applied in a particular order.

FIGS. 34 a-34 c conceptually illustrate an example of an ordered editoperation according to some embodiments. In particular, FIGS. 34 a-34 cillustrate the GUI 100 at ten different stages 3405-3450 of an orderededit operation.

The first stage 3405 of the GUI 100 is similar to the first stage 3305of the GUI 100 illustrated in FIG. 33 a except the brushes tool 1875 hasbeen activated instead of the effects tool 175. As shown, the brushcontrol 1888 has been selected and a user is selecting a region of thecropped image 142 (e.g., by touching the region of the image 142 andperforming a rubbing gesture) to apply the brush effect associated withthe brush control 1888 to the region of the cropped image 142. Whenreceiving the selection of the region of the cropped image 142, theapplication displays an indicator above the brush control 1888 toindicate that a brush effect has been applied to the cropped image 142with the brush control 1888 and displays an indicator above the brushestool UI item 138 to indicate that edits have been applied to the croppedimage 142 with the brushes tool 1875.

The second stage 3410 shows the GUI 100 after the user has finishedapplying the brush effect to the cropped image 142. The region of theimage 142 with the brush effect applied is indicated with verticallines. The second stage 3410 of the GUI 100 also shows the userselecting a different brush control. As shown, the user is selecting thebrush control 1880 (e.g., by touching the brush control 1880).

The third stage 3415 illustrates the GUI 100 after the brush control1880 is selected. When application receives the selection of the brushcontrol 1880, the application removes the highlighting of the brushcontrol 1888 and highlights the selected brush control 1880.

In this example, the application applies the brush control 1880's brusheffect edits to the image before applying the brush control 1888's brusheffect edits to the image. Therefore, in this example, the applicationtemporarily removes the brush control 1888's brush effect edits thathave been applied to the cropped image 142 when the brush control 1880is selected. As shown, the application indicates the removal of thebrush control 1888's brush effect edits from the cropped image 142 bydisplaying a peeling off animation. The peeling off animation shows alayer of the cropped image 142, with the brush control 1888's brusheffect edits applied to the layer, being removed from the cropped image142. While displaying the peeling off animation, the applicationdisplays a version of the image 142 without the brush control 1888'sbrush effect edits applied to the image 142, underneath the layer beingremoved. In other words, the application displays an animation thatappears like the layer with the brush control 1888's brush effect editsis being peeled away from the cropped image 142, starting from the lowerright corner of the cropped image 142 towards the upper left corner ofthe cropped image 142.

The fourth stage 3420 shows the GUI 100 near the end of the peeling offanimation. At this stage, the GUI 100 displays the layer being peeledfrom the cropped image 142 farther from the lower right corner of theimage and farther towards the upper left corner of the image.

The fifth stage 3425 illustrates the GUI 100 after the peeling offanimation of the brush control 1888's brush effect edits is completed.As shown, the GUI 100 displays the cropped image 142 with the brushcontrol 1888's brush effect edits removed from the image, as illustratedby the vertical lines no longer displayed. The fifth stage 3325 alsoshows a different highlighting of the indicator above the brushes toolUI item 138. This different highlighting is to indicate that the brushcontrol 1888's brush effect edits have been applied to the image beingedited but the brush effect edits are currently removed. When the imageediting application finishes displaying the peeling off animation, theapplication displays the different highlighting of the indicator abovethe brushes tool UI item 138.

The sixth stage 3430 of the GUI 100 shows brush effect edits beingapplied to the image using the brush control 1880. As shown, the user isselecting a second region of the cropped image 142 (e.g., by touchingthe region of the image 142 and performing a rubbing gesture) to applythe brush effect associated with the brush control 1880 to the secondregion of the cropped image 142. When receiving the selection of thesecond region of the cropped image 142, the application displays anindicator above the brush control 1880 to indicate that a brush effecthas been applied to the cropped image 142 with the brush control 1880.

The seventh stage 3435 shows the GUI 100 after the user has finishedapplying the brush effect with the brush control 1880 to the croppedimage 142. As shown, the second region of the image 142 with the brusheffect applied is indicated with horizontal lines. The seventh stage3435 of the GUI 100 also shows the user selecting a different brushcontrol. As shown, the user is selecting the brush control 1888 (e.g.,by touching the brush control 1888).

The eighth stage 3440 illustrates the GUI 100 after the brush control1888 is selected. When the image editing application receives theselection of the brush control 1888, the application removes thehighlighting from the brush control 1880 and highlights the brushcontrol 1888. The application continues to display the differenthighlighting above the brushes tool UI item 138 to indicate that thebrush control 1888's brush effect edits are still currently removed.

As mentioned above, the application in this example applies the brushcontrol 1880's brush effect edits to the image before applying the brushcontrol 1888's brush effect edits to the image. Since the user hasfinished making brush effect edits with the brush control 1880 to theimage, the application in this example applies the brush control 1888'sbrush effect edits that were temporarily removed from to the croppedimage 142 when the brush control 1880 was selected in the second stage3410. As shown, the application indicates the application of the brushcontrol 1888's brush effect edits to the cropped image 142 by displayinga peeling on animation. The peeling on animation shows a layer of thecropped image 142, with the brush control 1888's brush effect edits andthe brush control 1880's brush effect edits applied to the layer, beingplaced over the cropped image 142 with just the brush control 1880'sbrush effect edits. Thus, the application displays an animation thatappears like the layer with the brush control 1888's brush effect editsand the brush control 1880's brush effect edits is being pasted on tothe cropped image 142 with just the brush control 1880's brush effectedits, starting from the upper left corner of the cropped image 142towards the lower right corner of the cropped image 142.

The ninth stage 3445 shows the GUI 100 near the end of the peeling onanimation. In the ninth stage 3445, the GUI 100 displays the layer beingplace over the cropped image 142 farther from the upper left corner ofthe image and farther towards the lower right corner of the image. Also,the application continues to display the different highlighting abovethe brush control 1888 to indicate that the effects edits are stillcurrently removed.

The tenth stage 3450 illustrates the GUI 100 after the peeling onanimation is completed. As shown, the brush control 1888's brush effectedits that were temporarily removed have been applied to the croppedimage 142. This is indicated by the display of the vertical lines andthe horizontal lines on the cropped image 142. Here, the applicationdisplays the original highlighting above the brush control 1888 toindicate that the brush control 1888's brush effect edits have beenapplied to the image being edited

As described above, FIGS. 33 a-33 c and 34 a-34 c illustrate examples ofdisplaying peeling off animations when edits are temporarily removedfrom an image and displaying peeling on animations when the edits areapplied back on to the image in order to provide visual indications ofremoving edits from the image and applying edits to the image.Alternatively or in conjunction with displaying the animations, theimage editing application of some embodiments provides aural indicationsof removing edits from the image and applying edits to the image. Forinstance, in some embodiments, the image editing application plays asound effect (e.g., a sound of a piece of paper being lifted up) whiledisplaying a peeling off animation. Similarly, the image editingapplication of some embodiments plays a sound effect (e.g., a sound of asheet of paper being placed down) while displaying a peeling onanimation. Other embodiments may provide additional and/or differenttypes of indications of edits being removed from an image and editsbeing applied to the image.

FIG. 35 illustrates a table of orders for applying edits according tosome embodiments. As shown, the table defines the order for applyingedits using a crop tool, an exposure tool, a color tool, a brushes tool,and an effects tool. Also, the table defines, within the brushes tool,the order for applying edits using a repair brush (e.g., the repairbrush control illustrated in FIGS. 22 and 28), a red-eye brush (e.g.,the red-eye brush control illustrated in FIGS. 22 and 28), and a paintbrush (e.g., the saturate brush control, desaturate brush control,lighten brush control, darken brush control, the sharpen brush control,and the soften brush control illustrated in FIGS. 22 and 28)

For each tool listed in the left most column, the corresponding row inthe table defines the type of edits that may continue to be applied toan image while the tool in the left column is in use (i.e., isactivated) with checkmarks. For instance, when the crop tool is in use,crop edits, exposure edits, and color edits may continue to be appliedto the image, as indicated by the checkmarks in the corresponding row.Thus, when the crop tool is activated, the application of someembodiments removes any edits that have been applied to the image withthe repair tool, the red-eye tool, the paint tool, or the effects tool.

As described above, FIGS. 34 a-34 c illustrate an example operation ofapplying different edits made with the same tool to an image in aparticular order. The row corresponding to the repair tool and thered-eye tool are examples of applying different edits made with the sametool to an image in a particular order. For example, when the red-eyetool is in use only crop edits may continue to be applied to the image.So when the red-eye tool is activated (e.g., by selecting the red-eyebrush control 2281), the application of some embodiments removes anyedits that have been applied to the image with other brush tools (therepair tool and the paint tool in this example) as well as any editsthat have been applied to the image with other tools (the exposure tool,the color tool, and the effects tool in this example).

The table illustrated in FIG. 35 is one example of the orders forapplying edits to an image. One of ordinary skill in the art willrealize that any number of different orders may be defined for anynumber of different tools.

FIG. 36 conceptually illustrates a software architecture of an imagedediting application of some embodiments that provides an ordered editfeature. In some embodiments, the image editing application 3600 is astand-alone application or is integrated into another application (e.g.,a compositing application), while in other embodiments the image editingapplication 3600 might be implemented within an operating system.Furthermore, in some embodiments, the image editing application 3600 isprovided as part of a server-based solution. In some such embodiments,the image editing application 3600 is provided via a thin client. Thatis, the image editing application 3600 runs on a server while a userinteracts with the image editing application 3600 via a separate machineremote from the server. In other such embodiments, the image editingapplication 3600 is provided via a thick client. That is, the imageediting application 3600 is distributed from the server to the clientmachine and runs on the client machine.

As shown in FIG. 36, the image editing application 3600 includes a userinterface (UI) interaction and generation module 3605, an edit manager3610, a peel animator 3615, edit module(s) 3620 and a rendering engine3625. The image editing application 3600 also includes image datastorage 3630. The effects controls storage 3630

The image data storage 3630 stores image data (e.g., RAW image files,JPEG image files, thumbnail versions of images, edited versions ofimages, display resolution versions of image, other generated versionsof images, etc.) that a user views, edits, and organizes with the imageediting application 3600. In some embodiments, the image data storage3630 is stored in one physical storage while, in some embodiments, theimage data storage 3630 is stored on separate physical storages.

FIG. 36 also illustrates an operating system 3650 that includes outputdevice driver(s) 3655, input device driver(s) 3660 and display module3665. In some embodiments, as illustrated, the output device drivers3655, input device drivers 3660, and display module 3665 are part of theoperating system 3650 even when the image editing application 3600 is anapplication separate from the operating system 3650.

The input device drivers 3660 may include drivers for translatingsignals from a keyboard, mouse, touchpad, tablet, touchscreen, etc. Auser interacts with one or more of these input devices, which sendsignals to their corresponding device driver. The device driver thentranslates the signals into user input data that is provided to the UIinteraction module 3605.

The output device drivers 3655 may include drivers for translatingsignals to speakers, headphones, printers, etc. In some embodiments, theoutput device drivers 3655 of some embodiments translate signals fromthe UI interaction module 3605. For instance, the output device drivers3655 might receive audio signals (e.g., sound effects) from the UIinteraction module 3605 to output to speakers and/or headphones when apeel animation is being displayed.

The present application describes several graphical user interfaces thatprovide users with numerous ways to perform different sets of operationsand functionalities. In some embodiments, these operations andfunctionalities are performed based on different commands that arereceived from users through different input devices. For example, thepresent application illustrates the use of touch control to control(e.g., select, move) objects in the graphical user interface. In someembodiments, touch control is implemented through an input device thatcan detect the presence and location of touch on a display of thedevice. An example of such a device is a touch screen device. In someembodiments, with touch control, a user can directly manipulate objectsby interacting with the graphical user interface that is displayed onthe display of the touch screen device. For instance, a user can selecta particular object in the graphical user interface by simply touchingthat particular object on the display of the touch screen device. Assuch, when touch control is utilized, a cursor may not even be providedfor enabling selection of an object of a graphical user interface insome embodiments. However, when a cursor is provided in a graphical userinterface, touch control can be used to control the cursor in someembodiments. Additionally, in some embodiments, objects in a graphicaluser interface can also be controlled or manipulated through othercontrols, such as a cursor in a graphical user interface (e.g., using atrackpad, touchpad, mouse, etc.).

The display module 3665 translates the output of a user interface for adisplay device. That is, the display module 3665 receives signals (e.g.,from the UI interaction and generation module 3605) describing whatshould be displayed and translates these signals into pixel informationthat is sent to the display device. The display device may be an LCD,plasma screen, CRT monitor, touchscreen, etc.

The UI interaction and generation module 3605 of the image editingapplication 3600 interprets the user input data received from the inputdevice drivers 3660 and passes it to various modules, including the editmanager 3610, the peel animator 3615, and the rendering engine 3625. TheUI interaction module 3605 also manages the display of the UI (e.g.,fanning animations of UI controls, highlights of UI elements,indicators, etc.), and outputs this display information to the displaymodule 3665. This UI display information may be based on informationfrom the edit manager 3610, the peel animator 3615, and the rendingmodule 3625, etc. In addition, the UI interaction module 3605 maygenerate portions of the UI based just on user input—e.g., when a usermoves an item in the UI that only affect the display, not any of theother modules, such as moving a window from one side of the UI to theother. In some embodiments, the UI interaction module 3605 manages theoutput of audio (e.g., sound effects, etc.) based on user input and/orinteraction with the UI.

The edit manager 3610 manages the order of edit processing. Forinstance, the edit manager 3610 identifies edits that a user has made toan image being edited and determines an order to process identifiededits on the image. In some embodiments, the edit manager 3610determines the order to process edits based on a set of rules. When theedit manager 3610 determines the order, the edit manager 3610 determinesa set of edits to display in the UI and sends a request to the peelanimator 3615 to generate an animation (e.g., a peeling off animation, apeeling on animation, etc.) and a request to edit modules 3620 to applythe set of edits to the image for the rendering engine 3625 to render.

The peel animator 3615 generates animations for the rendering engine3625 based on information from the edit manager 3610 and the editmodules 3620. When the edit manager 3610 requests a peeling animation(e.g., a peeling off animation, a peeling on animation, etc.), the peelanimator 3615 (1) retrieves from the UI interaction and generationmodule 3605 a version of the image being edited that is currentlydisplayed in the UI and (2) retrieves from the edit modules 3620 aversion of the image being edited that is to be displayed in the UIafter the peeling animation. With the information retrieved from the UIinteraction module 3605 and the edit modules 3620, the peel animator3615 generates the requested animation and sends the animation to therendering engine 3625.

The edit modules 3620 are for applying edits to an image (e.g., an imagebeing edited). When the edit modules 3620 receive from the edit manager3610 a set of edits to apply to an image, the edit modules 3620 identifythe image data in the image data storage 3630 that corresponds to theimage and apply the set of edits to the image. The edit modules 3620send a version of the edited image to the rendering engine 3625 torender a version of the edited image to display. In some embodiments,the edit modules 3620 send a version of the edited image to the peelanimator 3615 in order for the peel animator 3615 to generate a peelanimation.

The rendering engine 3625 is responsible for rending different versionsof images based on the original image. For instance, the renderingmodule 3625 uses the image data in the image data storage 3630 to renderthumbnails of images and display resolution versions of the images forthe UI interaction and generation module 3605 to send to the displaymodule 3665 to display in a GUI. When edits are made to an image, therendering engine 3625 generates edited thumbnail and display resolutionversions of the image based on the image data in the image data storage3630. The rendering engine 3625 also renders images when the applicationof some embodiments exports images to an external source. In some cases,the rendering engine 3625 renders the full-size version of originalimage.

While many of the features have been described as being performed by onemodule (e.g., the UI interaction module 3605, the peel animator 3615,etc.), one of ordinary skill in the art will recognize that thefunctions described herein might be split up into multiple modules.Similarly, functions described as being performed by multiple differentmodules might be performed by a single module in some embodiments (e.g.,the peel animator 3615 and the edit manager 3610).

III. Data Structure for Non-Destructive Images

The above sections describe various operations for editing images in theGUI of some embodiments. The application of some embodiments generatesand stores a data structure to represent images. FIG. 37, whichconceptually illustrates a data structure 3700 for an image as stored bythe application of some embodiments. As shown, the data structure 3700includes an image ID 3705, a reference to image data 3710, editinstructions 3715, Exchangeable image file format (Exif) data 3725, acaption 3730, shared image data 3735, cached versions 3740 of the image,any tags 3750 on the image, and any additional data for the image. Theimage ID 3705 is a unique identifier for the image.

The reference to image data 3710 is a pointe to the actual full-sizepixel data for displaying the image (e.g., a series of color-spacechannel values for each pixel in the image or an encoded versionthereof). The image data of different embodiments are stored indifferent locations. For instance, the image data may be stored in alocal location (e.g., stored as a file in a file system of a computingdevice on which the application runs). In such cases, the reference 3710points to the local location. In some embodiments, the image data isstored in another application (e.g., stored in a database of an imageorganizing application). The other application, in some embodiments,runs on the same computing device on which the application runs whereasthe other application, in other embodiments, runs on a differentcomputing device. The reference 3710 in some such embodiments stores apointer to the image data stored in the other application. In someembodiments, instead of storing a pointer to the image data stored inthe other application, the reference 3710 stores a unique identifier forretrieving the image data from the other application (e.g., via anapplication programming interface (API) call). In some embodiments, whenthe image is edited through the application, the application generatesretrieves the image that is stored in the other application and thenstores the image in the data structure 3700.

The edit instructions 3715 include information regarding any edits theuser has applied to the image. In this manner, the application storesthe image in a non-destructive format, such that the application caneasily revert from an edited version of the image to the original at anytime. For instance, if the user applies a saturation effect to theimage, leaves the application, and then comes back and decides to removethe effect, the user can easily do so.

As shown, the edit instructions 3715 stores a set of instructions foreach edit that the user has applied to the image and the tool identifierfor identifier the tool that the user used to apply the edit. Examplesof edits include crop edits, rotate edits, exposure edits, color edits,brush effect edits, effects edits, or any other type of edit thatmodifies the pixels of the image. This way, the application can identifyall the edits that the user has applied to the image using a particulartool. This allows the application to identify edits made with aparticular tool so that the application can remove and re-apply edits tothe image in order to implement features such as the ones describesabove by reference to FIGS. 33 a-33 c, 34 a-34 c, and 35. Someembodiments store these editing instructions in a particular order, sothat users can view different versions of the image with only certainsets of edits applied or the application can easily remove and re-applycertain types of edits. In some embodiments, the editing instructionsare stored in the order in which the user has applied the edits to theimage.

The Exif data 3725 includes various information stored by the camerathat captured the image, when that information is available. While Exifis one particular file format that is commonly used by digital cameras,one of ordinary skill in the art will recognize that comparableinformation may be available in other formats as well, or may even bedirectly input by a user. The Exif data 3725 includes camera settingsdata, GPS data, and a timestamp. The camera settings data includesinformation about the camera settings for a image, if that informationis available from the camera that captured the image. This information,for example, might include the aperture, focal length, shutter speed,exposure compensation, and ISO. The GPS data 3725 indicates the locationat which a image was captured, while the timestamp indicates the time(according to the camera's clock) when the image was captured.

The caption 3730 is a user-entered description of the image. In someembodiments, this information is displayed with the photo in the imageviewing area, but may also be used to display over the photo in acreated journal, and may be used if the image is posted to a socialmedia or photo-sharing website. When the user posts the image to such awebsite, the application generates shared image data 3735 for the image.This information stores the location (e.g., Facebook®, Flickr®, etc.),as well as an object ID for accessing the image in the website'sdatabase. The last access date is a date and time at which theapplication last used the object ID to access any user comments on thephoto from the socialmedia or photo sharing website.

The cached image versions 3740 store versions of the image that arecommonly accessed and displayed, so that the application does not needto repeatedly generate these images from the full-size image data 3710.As shown, the cached image versions 3740 include thumbnail image of thecurrent image, a display resolution version (e.g., a version tailoredfor the image display area) of the current image, and a displayresolution version of the original image. In some embodiments, theapplication generates a new thumbnail image for the current thumbnailimage and the new display resolution version for the current displayresolution image when an edit is made to the image. For instance, whenedits are removed during an ordered edit operation, the applicationgenerates new thumbnail and display versions of the image that includesonly the edits that have not been removed for display in the GUI.

By storing cached versions of the image, the application of someembodiments does not need to render full-sized versions of the image. Insome embodiments, the application generates full-sized versions of theimage when the application exports the image. For instance, the usermight use a feature of the application of some embodiments that allowsthe user to save the image to another application (e.g., an imageorganizing application). In such instances, the application generates afull-sized version of the image and exports it the other application.

As mentioned above, the image data is stored in another application insome embodiments. In some embodiments, the other application also storesa thumbnail version of the image. The application in some suchembodiments stores a pointer to the thumbnail version that is stored inthe other application while the image is not edited. In someembodiments, when the image is edited through the application, theapplication generates versions of the image that is stored in the otherapplication and then stores them in the cached image versions field ofthe data structure 3700.

The tags 3745 are information that the application enables the user toassociate with an image. For instance, in some embodiments, users can,mark the image as a favorite, flag the image (e.g., for further review),and hide the image so that the image will not be displayed when the usercycles through a collection that includes the image. Other embodimentsmay include additional tags. For instance, some embodiments store a tagfor indicating that the image data is a raw image, a tag that indicateswhether an edit has been applied to the image, etc. Finally, the imagedata structure 3700 includes additional data 3750 that the applicationmight store with an image (e.g., locations and sizes of faces, etc.).

One of ordinary skill in the art will recognize that the image datastructure 3700 is only one possible data structure that the applicationmight use to store the required information for an image. For example,different embodiments might store additional or less information, storethe information in a different order, etc.

In some embodiments, the application provides a feature that allows theuser to switch between the current edited version of the image and theoriginal image. To facilitate the quick switching between the differentversions of the image, the application of some embodiments utilizes thenon-destructive method of storing images described above.

FIG. 38 conceptually illustrates a toggle operation of some embodimentsthat allows the user to toggle between the original image and thecurrently edited image. The application can easily perform this toggleoperation because, as mentioned above, the application maintains theoriginal image in a non-destructive way. FIG. 38 illustrates the GUI 100at four different stages 3805-3820 of a toggle operation that iscontrolled by a toggle button.

The first stage 3805 of the GUI 100 shows an image after it has beenedited through the effects tool. As shown, a user has activated theeffects tool 175 (e.g., by selecting the UI item 140), as indicated bythe highlighting of the effects item 140. In addition, the user hasselected a thumbnail slider control 3880 of the effects tool 175 (e.g.,by touching the thumbnail slider control 3880 when the set of thumbnailslider controls of the effects tool 175 were fanned out). The edits arerepresented in this image through the diagonal lines displayed on theimage. The first stage also illustrates that the user has selected thetoggle button 157.

The second stage 3810 illustrates the GUI 100 after the user hasselected the toggle button 157. The edited image in the image displayarea 145 has been replaced by the original image. In this FIG. 28, theoriginal image is differentiated from the edited image by the absence ofthe diagonal lines that were displayed on the edited image in the firststage 3805.

The third stage 3815 then illustrates the GUI 100 after the user hasselected the toggle button 157 again, the effect of which is to revertfrom the original image back to the edited image. This results in theillustration for the fourth stage 3820, which illustrates the editedimage with the diagonal lines once again displayed on the image.

FIG. 39 conceptually illustrates another toggle operation of someembodiments that allows the user to toggle between the edited image tothe original image by pressing and holding down the toggle button 157.FIG. 39 illustrates the toggle operation of GUI 100 in three stages3905-3920.

The first stage 3905 of the GUI 100 shows an image after it has beenedited through application of certain effects from the effects tool 175.As shown, a user has made certain edits to image. The edits arerepresented in this image through the diagonal lines displayed on theimage. The first stage also illustrates that the user has selected andcontinues to select the toggle button 157 (e.g. by touching the togglebutton without releasing their finger from the screen) the effect ofwhich is illustrated in the second stage.

The second stage 3910 illustrates the GUI 100 and the original imagethat appears within a certain threshold time period after the userselects and holds down the toggle button 157. The edited image in theimage display area 145 has been replaced by the original image. Theoriginal image is differentiated from the edited image by the absence ofthe diagonal lines that were displayed on the edited image in the firststage 3905.

The third stage 3915 then illustrates the GUI 100 after the user hasreleased the toggle button 157, which again reverts the image beingdisplayed from the original image back to the edited image.

FIG. 40 conceptually illustrates another toggle operation of someembodiments that allows the user to toggle between the original imageand an edited image by pressing and holding down the toggle button 157.FIG. 20 illustrates the toggle operation of GUI 100 in three stages4005-4020.

The first stage 4005 of the GUI 100 shows an original image without anyedits to the image. The first stage also illustrates that the user hasselected and continues to select the toggle button 157 (e.g. by touchingthe toggle button without releasing their finger from the screen) theeffect of which is illustrated in the second stage 4010.

The second stage 4010 illustrates the GUI 100 and the edited image thatappears within a certain threshold time period after the user selectsand holds down the toggle button 157. The original image in the previewdisplay area has been replaced by the edited image. The edited image isdifferentiated from the original image in the first stage 4005 by thediagonal lines that are displayed on the edited image.

The third stage 4015 then illustrates the GUI 100 after the user hasreleased the toggle button 157, which again reverts the image beingdisplayed from the edited image back to the original image.

FIG. 41 conceptually illustrates a toggle operation of some embodimentsthat allows the user to toggle between a cropped image and the originalimage when the crop tool 132 is active. FIG. 41 illustrates the toggleoperation of GUI 100 in four stages 4105-4120.

The first stage 4105 of the GUI 100 shows an image after it has beencropped using the crop tool 132. As shown, a user has activated the croptool 132 (e.g., by selecting the UI item 132), as indicated by thehighlighting of the crop tool 132. The cropped image displays only thecropped portion of the original image, which in this image is the frontportion of a car. The first stage also illustrates that the user hasselected the toggle button 157.

The second stage 4110 illustrates the GUI 100 after the user hasselected the toggle button 157 when the crop tool 132 is activated. Thecropped image in the image display area 145 has been replaced by theoriginal, un-cropped image. The original image displays the entireimage, which in this image is the entire car without any of the croppingedits.

The third stage 4115 then illustrates the GUI 100 after the user hasselected the toggle button 157 again, the effect of which is to revertfrom the original image back to the cropped image. This results in theillustration for the fourth stage 4120, which illustrates the croppedimage with again only the front portion of the car being displayed inthe image.

The FIGS. 38-41 described above provide examples of a feature fortoggling between two images. In some embodiments, the feature provides avisual indication when switching from one image to the other image. Forinstance, some embodiments display an animation (e.g., the peelinganimations described above by reference to FIGS. 33 a-33 c and 34 a-34c) that transitions from displaying one image to displaying the otherimage.

IV. Image Beaming

The application of some embodiments provides a feature that allows theuser of the application to send images to users of other devices thatare also running the application. The following section will describeseveral examples and embodiments of the feature.

FIG. 42 conceptually illustrates an example of two devices using thebeaming services of the image editing application of some embodiments.Specifically, FIG. 42 illustrates a locality 4201 that is serviced by awireless network transceiver 4202 that provides network communicationservices (e.g. Wi-Fi service) to four participants 4203 with handhelddevices 4204. This figure also illustrates a fifth participant 4206 whois outside the range of the wireless network transceiver 4202 andtherefore unable to receive communications. It should be noted that evenwhen a participant is within this locality, the participant might not beable to use the network transceiver 4202 for establishing communicationwith the other devices if the particular device is not part of thatnetwork. Accordingly, in this situation, a device might receivecommunication with other devices because it is outside of the network orbecause the device is outside of the range of the wireless networktransceiver.

As shown in FIG. 42, each device 4204 within the network broadcasts abeaming service available message 4207 to indicate that the device 4204is available to receive data from the image editing applications of theother devices 4204 through the beaming services of these applications.The structure of this message 4207 includes the hostname of the device,service name of the device, and the service type. The hostname is usedto identify each device within the network with an identifier. Thisfigure illustrates four devices 4204, each with a different hostname,including devices “1”, “2”, “3” and “4”. The service name of the deviceindicates that the application using the beaming service is the imageediting application. The service type indicates that each message isbroadcast for the beaming services.

In the example illustrated in FIG. 42, the two devices that are about toestablish communication with each other are “Device 1” 4211 and “Device2” 4212, as further described below by reference to FIG. 43. FIG. 42illustrates that the image editing application is concurrently runningon both devices, device 1 4211 and device 2 4212, in order to allowthese two devices to exchange image data. In other words, for any firstdevice to be able to receive image data from a second device, the firstdevice, in some embodiments, has to have its image editing applicationactive so that it is broadcasting its beaming service availabilitymessage to inform other nearby devices, including the second device,that it is ready to receive messages. However, one of ordinary skill inthe art will recognize that in other embodiments, devices will broadcastthis beaming service message even when the image editing application isnot being executed by the device. In these embodiments, the user will beprompted to open the image editing application to receive the image datawhen a second device 4212 beams an image to a first device 4211 thatdoes not have its image editing application open.

In the example illustrated in FIG. 42 and the examples described below,the devices communicate through a wireless network 4202 (e.g., Wi-Finetwork that is established by a wireless transceiver that is not partof one of the devices). Other embodiments, however, do not need such awireless transceiver 4202 to establish a communication between thedevices 4204. For instance, some embodiments use the Bluetoothtransceiver of the device to establish a wireless link between thedevices and then use this link to beam images between devices. In boththe Bluetooth approach and the local wireless network approach have anadvantage over prior IR based approaches in that they do not require thedevices be in line of sight with each other in order to establishinferred communications between them. However, some of the featuresdescribed above and below could be implemented in more traditional IRbased approaches.

FIG. 43 conceptually illustrates an example of a first device 4211beaming an edited image to a second device 4212. This example isdescribed in terms of five stages 4305-4325. The first three stages4305-4315 show a first user's interaction with the first device 4311while the fourth and fifth stages 4320-4325 illustrate the GUI 100display and interaction on both the first device 4211 and the seconddevice 4212.

The first stage shows an edited image 4301. It also shows the firstuser's selection of the share button 155 through the touching of thelocation of display of this icon on the display. The share button 155enables a user to share an image in a variety of ways. In someembodiments, the user can send a selected image to another compatibledevice on the same network (e.g., Wi-Fi or Bluetooth). The second stage4310 shows that in response to this selection, a window 4302 has openedthat provides the user with multiple choices for transmitting the editedimage 4301. This stage 4310 also shows that the user has selected Beam4303 as a transmission option for transmitting the image 4301.

The third stage 4315 shows that another window has opened in response tothe selection of the beam option 4303 in the window 4302 in the secondstage 4310. This third stage 4315 also shows the user's selection ofDevice 2 4304.

The fourth stage 4320 illustrates that after the selection of Device 24304 on the first device 4211, the image editing application on thesecond device 4212 informs the second user that device one would like tobeam a photo to the user. The fourth stage 4320 also shows that thesecond user of the second device 4212 has accepted by touching theaccept option 4306 and that this acceptance has been relayed back to thefirst device 4211 through another message transmission.

Finally the fifth stage 4325 shows that the first device 4211 provides adisplay prompt 4307 that notifies the first user that the user of thesecond device 4212 has accepted the image. It also shows that inresponse to this acceptance, the first device 4211 has transmitted theimage data along with the instructions for editing this image to thesecond device 4212.

FIG. 44 conceptually illustrates an example of a user browsing through alibrary of beamed images on a device 4212. The figure also illustratesthe user toggling through an edited version of a beamed image and theoriginal image. This example is described in terms of six stages4405-4430.

The first stage 4405 of the GUI 100 illustrates an image 4406 displayedon the device 4212 that is stored in a library of images that have notbeen beamed to the device 4212. The first stage 4405 also illustratesthat the user has selected the back icon 151, which enables the user tonavigate back to a collection organization GUI. In order to access otherimage libraries stored on the device, which is illustrated in the secondstage 4410. In some embodiments, when the device receives a beamedimage, the device stores the image in a particular library consistingonly of other images that have been beamed to a device.

The second stage 4410 illustrates the GUI 100, which displays the imagealbums currently stored on the device. In this example, the user hasselected the albums icon 4407 to view the image albums currently storedon the device 4112. The device only has a single image album labeledBeamed 4407. In some embodiments, this beamed image album 4407 storesonly the images that have been beamed to the device. The second stagealso illustrates the user has selected the beamed image album 4407.

The third stage 4415 illustrates the GUI 100 and the thumbnail images4408 of the photos stored in the beamed image library 4407. The librarycurrently contains only one image 4409, which the user has selected fordisplay.

The fourth stage 4420 of the GUI 100 shows the display of the beamedimage 4411 after the user has selected the thumbnail 4409 of the image.As shown, the image 4411 has had certain edits made to the image. Theedits are represented in this image through the diagonal lines displayedon the image 4411. The fourth stage 4420 also illustrates that the userhas selected and continues to select the toggle button 157 (e.g. bytouching the toggle button without releasing their finger from thescreen) the effect of which is illustrated in the fifth stage 4425.

The fifth stage 4425 illustrates the GUI 100 and the original image 4413that appears within a certain threshold time period after the userselects and holds down the toggle button 157. The edited beamed image4411 in the image display area 145 has been replaced by the originalbeamed image 4413. As described above, the application can easilyperform this toggle operation because the application maintains theoriginal image 4413 in a non-destructive way. The original image 4413 isdifferentiated from the edited image 4411 by the absence of the diagonallines that were displayed on the edited beamed image 4411 in the firststage 4405.

The sixth stage 4430 then illustrates the GUI 100 after the user hasreleased the toggle button 157, which again reverts the image beingdisplayed from the original beamed image 4413 back to the edited beamedimage 4411.

FIG. 45 conceptually illustrates a process 4500 of some embodiments forbroadcasting a beaming service for receiving beamed images. In someembodiments, the process 4500 is performed by an image editingapplication (e.g., the image editing applications described above byreference to FIGS. 1-44) while the image editing application is running.The image editing application in some such embodiments performs theprocess 4500 when the image editing application is started. In someembodiments, the process 4500 is performed by an operating system (e.g.,as a service) when the image editing application is not running. Thisway, the process 4500 may detect when another device sends a request totransmit an image to the device on which the process 4500 is runningwhile the image editing application is not running.

The following description will be described in terms of a first deviceand a second device for purpose for explanation. The process 4500 isbeing performed on the first device and the second device is differentdevice that, in some embodiments, is running the image editingapplication. One of ordinary skill in the art will realize that theservice may be broadcasted to any number of different devices and, thus,receive image data from any device that detects the service and requestto send image data to the first device.

The process 4500 starts by broadcasting (at 4510) a service thatspecifies a hostname parameter, a service name parameter, and a servicetype parameter. The hostname parameter is the hostname of the devicefrom which the process 4500 is broadcasting (e.g., the device on whichthe image editing application is running). The service name parameter isa name used to identify the service being broadcasted. In someembodiments, the service name parameter is the name of the image editingapplication. The service type parameter specifies the type of servicethat is broadcasted. In some instances, an application on a device mayprovide several different services for the application. Thus, using thehostname and service name is not sufficient to differentiate among theseveral services broadcasted for the application. As such, the servicetype parameter is used to differentiate among different services thatmay be provided by a single application running on a device.

Next, the process 4500 determines (at 4520) whether a connection requestfrom the second is received. In some embodiments, the process 4500receives a request to establish a set of connections with second devicethrough which the first and second devices use to communicate. When theprocess 4500 determines that a connection request from the second deviceis received, the process 4500 proceeds to 4530. Otherwise, the process4500 returns to 4510 to continue broadcasting the service.

At 4530, the process 4500 establishes a set of connections (e.g., byestablishing a set of network sockets) with the second device throughwhich the first and second devices use to communicate. Afterestablishing the set of connections, the process 4500 receives (at 4540)an image from the second device. In some embodiments, the process 4500receives the image in the form of a data structure of the image that issimilar to the data structure described above by reference to FIG. 37.

FIG. 46 conceptually illustrates a process 4600 of some embodiments fordetecting a beaming service to identify candidate devices for receivingbeamed images. The process 4600 of some embodiments is performed by animage editing application (e.g., the image editing applicationsdescribed above by reference to FIGS. 1-44) while the application isrunning. In some embodiments, the image editing application in some suchembodiments performs the process 4500 when the image editing applicationis started.

The process 4600 begins by searching (at 4610) a network for services ofa service type. As noted above, the image editing application of someembodiments broadcasts a service that specifies a service type alongwith a service name and the hostname of the device on which theapplication is running. In some embodiments, the process 4600 searchesfor services broadcasted by the image editing application of suchembodiments. The process 4600 in some embodiments uses a servicediscovery protocol to search the network for services of a service type.Examples of service discovery protocols include Apple Bonjour®, zeroconfiguration networking (zeroconf), a service location protocol (SLP),simple service discovery protocol (SSDP), Bluetooth® service discoveryprotocol (SDP), etc. In some embodiments, the network that the process4600 is searching is a single broadcast domain network.

Next, the process 4600 determines (at 4620) whether a device thatprovides the service type is identified. In some embodiments, theprocess 4600 uses a service discovery protocol mentioned above to makethe determination. When the process 4600 determines that a device thatprovides the service type is not identified, the process 4600 returns to4610 to continue searching the network.

When the process 4600 determines that a device that provides the servicetype is identified, the process 4600 displays (at 4630) the hostname ofthe host. As mentioned above, some embodiments broadcast a service thatspecifies the hostname of the host. In some embodiments, the process4600 displays the hostname and/or the service name specified by theservice in a GUI (e.g., the GUI 100 described above by reference to FIG.43).

The process 4600 then determines (at 4640) whether a selection of aservice is received. When the process 4600 determines that a selectionof a service is received, the process 4600 proceeds to 4650. Otherwise,the process 4600 returns to 4610 to continue searching for services of aservice type and displaying the hostnames of devices that provide theservices of the service type.

At 4650, the process 4600 resolves the hostname of the device that isproviding the selected service to an Internet Protocol (IP) address. Insome embodiments, the process 4600 uses a service discovery protocolexplained above to resolve the hostname of the device.

Next, the process 4600 establishes (at 4660) a set of connections to thedevice using the IP address. The process 4600 of some embodiments usesthe IP address to establish a set of network sockets with the device.

Finally, the process 4600 transmits (at 4670) an image to the device. Insome embodiments, the process 4500 transmits the image in the form of adata structure of the image that is similar to the data structuredescribed above by reference to FIG. 37.

To transmit the image (or image data structure), the process 4600divides the image data into defined-size portions (e.g., 65536 byes) andtransmits the image data in packets. In some embodiments, each packetincludes a header and a portion of the image data (e.g., the payload).The packet header of some embodiments includes various fields thatinclude a signature field for versioning purposes, a type field forspecifying the type of packet (e.g., payload packet, cancel packet,acknowledgement packet, etc.), a UUID for uniquely identifying thepacket against other packets, a packet index field, a packet countfield, an item index field, an item count field, a filename lengthfield, etc.

The above-described FIGS. 45 and 46 illustrate example techniques forreceiving an image from a single device and transmitting an image to asingle device. One of ordinary skill in the art will recognize that thesimilar techniques may be used to receive multiple images from multipledifferent devices. Similarly, similar techniques may be used to transmitmultiple images to multiple different devices.

V. Image Viewing, Editing, and Organization Application

The above-described figures illustrated various examples of the GUI ofan image viewing, editing, and organization application of someembodiments. FIG. 47 illustrates a detailed view of a GUI 4700 of someembodiments for viewing, editing, and organizing images. The GUI 4700will be described in part by reference to FIG. 48, which conceptuallyillustrates a data structure 4800 for an image as stored by theapplication of some embodiments.

The data structure 4800 includes an image ID 4805, image data 4810, editinstructions 4815, Exchangeable image file format (Exif) data 4825, acaption 4830, shared image data 4835, cached versions 4840 of the image,any tags 4845 on the image, and any additional data 4850 for the image.The image ID 4805 is a unique identifier for the image, which in someembodiments is used by the collection data structures to refer to theimages stored in the collection.

The image data 4810 is the actual full-size pixel data for displayingthe image (e.g., a series of color-space channel values for each pixelin the image or an encoded version thereof). In some embodiments, thisdata may be stored in a database of the image viewing, editing, andorganization application, or may be stored with the data of anotherapplication on the same device. In some embodiments, this additionalapplication is another image organization application that operates onthe device, on top of which the image viewing, editing, and organizationoperates.

Thus, the data structure may store a pointer to the local fileassociated with the application or an ID that can be used to query thedatabase of another application. In some embodiments, once theapplication uses the image in a journal or makes an edit to the image,the application automatically makes a local copy of the image file thatcontains the image data.

The edit instructions 4815 include information regarding any edits theuser has applied to the image. In this manner, the application storesthe image in a non-destructive format, such that the application caneasily revert from an edited version of the image to the original at anytime. For instance, the user can apply a saturation effect to the image,leave the application, and then reopen the application and remove theeffect at another time. The edits stored in these instructions may becrops and rotations, full-image exposure and color adjustments,localized adjustments, and special effects, as well as other edits thataffect the pixels of the image. Some embodiments store these editinginstructions in a particular order, so that users can view differentversions of the image with only certain sets of edits applied.

The Exif data 4825 includes various information stored by the camerathat captured the image, when that information is available. While Exifis one particular file format that is commonly used by digital cameras,one of ordinary skill in the art will recognize that comparableinformation may be available in other formats as well, or may even bedirectly input by a user. The Exif data 4825 includes camera settingsdata, GPS data, and a timestamp. The camera settings data includesinformation about the camera settings for a image, if that informationis available from the camera that captured the image. This information,for example, might include the aperture, focal length, shutter speed,exposure compensation, and ISO. The GPS data 4825 indicates the locationat which a image was captured, while the timestamp indicates the time(according to the camera's clock) at which the image was captured.

The caption 4830 is a user-entered description of the image. In someembodiments, this information is displayed with the photo in the imageviewing area, but may also be used to display over the photo in acreated journal, and may be used if the image is posted to a socialmedia or photo-sharing website. When the user posts the image to such awebsite, the application generates shared image data 4835 for the image.This information stores the location (e.g., Facebook®, Flickr®, etc.),as well as an object ID for accessing the image in the website'sdatabase. The last access date is a date and time at which theapplication last used the object ID to access any user comments on thephoto from the social media or photo sharing website.

The cached image versions 4840 store versions of the image that arecommonly accessed and displayed, so that the application does not needto repeatedly generate these images from the full-size image data 4810.For instance, the application will often store a thumbnail for the imageas well as a display resolution version (e.g., a version tailored forthe image display area). The application of some embodiments generates anew thumbnail for an image each time an edit is applied, replacing theprevious thumbnail. Some embodiments store multiple display resolutionversions including the original image and one or more edited versions ofthe image.

The tags 4845 are information that the application enables the user toassociate with an image. For instance, in some embodiments, users canmark the image as a favorite, flag the image (e.g., for further review),and hide the image so that the image will not be displayed within thestandard thumbnail grid for a collection and will not be displayed inthe image display area when the user cycles through a collection thatincludes the image. Other embodiments may include additional tags.Finally, the image data structure 4800 includes additional data 4850that the application might store with an image (e.g., locations andsizes of faces, etc.).

One of ordinary skill in the art will recognize that the image datastructure 4800 is only one possible data structure that the applicationmight use to store the required information for an image. For example,different embodiments might store additional or less information, storethe information in a different order, etc.

Returning to FIG. 47, the GUI 4700 includes a thumbnail display area4705, an image display area 4710, a first toolbar 4715, a second toolbar4720, and a third toolbar 4725. The thumbnail display area 4705 displaysthumbnails of the images in a selected collection. Thumbnails are smallrepresentations of a full-size image, and represent only a portion of animage in some embodiments. For example, the thumbnails in thumbnaildisplay area 4705 are all squares, irrespective of the aspect ratio ofthe full-size images. In order to determine the portion of a rectangularimage to use for a thumbnail, the application identifies the smallerdimension of the image and uses the center portion of the image in thelonger direction. For instance, with a 1600×1200 pixel image, theapplication would use a 1200×1200 square. To further refine the selectedportion for a thumbnail, some embodiments identify a center of all thefaces in the image (using a face detection algorithm), and then use thislocation to center the thumbnail portion in the clipped direction. Thus,if the faces in the theoretical 1600×1200 image were all located on theleft side of the image, the application would use the leftmost 1200columns of pixels rather than cut off 200 columns on either side.

After determining the portion of the image to use for the thumbnail, theimage-viewing application generates a low-resolution version (e.g.,using pixel blending and other techniques) of the image. The applicationof some embodiments stores the thumbnail for an image as a cachedversion 4840 of the image. Thus, when a user selects a collection, theapplication identifies all of the images in the collection (through thecollection data structure), and accesses the cached thumbnails in eachimage data structure for display in the thumbnail display area.

The user may select one or more images in the thumbnail display area(e.g., through various touch interactions described above, or throughother user input). The selected thumbnails are displayed with ahighlight or other indicator of selection. In thumbnail display area4705, the thumbnail 4730 is selected. In addition, as shown, thethumbnail display area 4705 of some embodiments indicates a number ofimages in the collection that have been flagged (i.e., that have a tag4845 for the flag set to yes). In some embodiments, this text isselectable in order to display only the thumbnails of the flaggedimages.

The application displays selected images in the image display area 4710at a larger resolution than the corresponding thumbnails. The images arenot typically displayed at the full size of the image, as images oftenhave a higher resolution than the display device. As such, theapplication of some embodiments stores a cached version 4840 of theimage designed to fit into the image display area. Images in the imagedisplay area 4710 are displayed in the aspect ratio of the full-sizeimage. When one image is selected, the application displays the image aslarge as possible within the image display area without cutting off anypart of the image. When multiple images are selected, the applicationdisplays the images in such a way as to maintain their visual weightingby using approximately the same number of pixels for each image, evenwhen the images have different aspect ratios.

The first toolbar 4715 displays title information (e.g., the name of thecollection shown in the GUI, a caption that a user has added to thecurrently selected image, etc.). In addition, the toolbar 4715 includesa first set of GUI items 4735-4738 and a second set of GUI items4740-4743.

The first set of GUI items includes a back button 4735, a grid button4736, a help button 4737, and an undo button 4738. The back button 4735enables the user to navigate back to a collection organization GUI, fromwhich users can select between different collections of images (e.g.,albums, events, journals, etc.). Selection of the grid button 4736causes the application to move the thumbnail display area on or off ofthe GUI (e.g., via a slide animation). In some embodiments, users canalso slide the thumbnail display area on or off of the GUI via a swipegesture. The help button 4737 activates a context-sensitive help featurethat identifies a current set of tools active for the user and provideshelp indicators for those tools that succinctly describe the tools tothe user. In some embodiments, the help indicators are selectable toaccess additional information about the tools. Selection of the undobutton 4738 causes the application to remove the most recent edit to theimage, whether this edit is a crop, color adjustment, etc. In order toperform this undo, some embodiments remove the most recent instructionfrom the set of edit instructions 4815 stored with the image.

The second set of GUI items includes a sharing button 4740, aninformation button 4741, a show original button 4742, and an edit button4743. The sharing button 4740 enables a user to share an image in avariety of different ways. In some embodiments, the user can send aselected image to another compatible device on the same network (e.g.,Wi-Fi or Bluetooth network), upload an image to an image hosting orsocial media website, and create a journal (i.e., a presentation ofarranged images to which additional content can be added) from a set ofselected images, among others.

The information button 4741 activates a display area that displaysadditional information about one or more selected images. Theinformation displayed in the activated display area may include some orall of the Exif data 4825 stored for an image (e.g., camera settings,timestamp, etc.). When multiple images are selected, some embodimentsonly display Exif data that is common to all of the selected images.Some embodiments include additional tabs within the information displayarea for (i) displaying a map showing where the image or images werecaptured according to the GPS data, if this information is available and(ii) displaying comment streams for the image on any photo sharingwebsites. To download this information from the websites, theapplication uses the object ID stored for the image with the sharedimage data 4835 and sends this information to the website. The commentstream and, in some cases, additional information, are received from thewebsite and displayed to the user.

The show original button 4742 enables the user to toggle between theoriginal version of an image and the current edited version of theimage. When a user selects the button, the application displays theoriginal version of the image without any of the editing instructions4815 applied. In some embodiments, the appropriate size image is storedas one of the cached versions 4840 of the image, making it quicklyaccessible. When the user selects the button again 4742 again, theapplication displays the edited version of the image, with the editinginstructions 4815 applied.

The edit button 4743 allows the user to enter or exit edit mode. When auser has selected one of the sets of editing tools in the toolbar 4720,the edit button 4743 returns the user to the viewing and organizationmode, as shown in FIG. 47. When the user selects the edit button 4743while in the viewing mode, the application returns to the last used setof editing tools in the order shown in toolbar 4720. That is, the itemsin the toolbar 4720 are arranged in a particular order, and the editbutton 4743 activates the rightmost of those items for which edits havebeen made to the selected image.

The toolbar 4720, as mentioned, includes five items 4745-4749, arrangedin a particular order from left to right. The crop item 4745 activates acropping and rotation tool that allows the user to align crooked imagesand remove unwanted portions of an image. The exposure item 4746activates a set of exposure tools that allow the user to modify theblack point, shadows, contrast, brightness, highlights, and white pointof an image. In some embodiments, the set of exposure tools is a set ofsliders that work together in different combinations to modify the tonalattributes of an image. The color item 4747 activates a set of colortools that enable the user to modify the saturation and vibrancy, aswell as color-specific saturations (e.g., blue pixels or green pixels)and white balance. In some embodiments, some of these tools arepresented as a set of sliders. The brushes item 4748 activates a set ofenhancement tools that enable a user to localize modifications to theimage. With the brushes, the user can remove red-eye and blemishes, andapply or remove saturation and other features to localized portions ofan image by performing a rubbing action over the image. Finally, theeffects item 4749 activates a set of special effects that the user canapply to the image. These effects include gradients, tilt shifts,non-photorealistic desaturation effects, grayscale effects, variousfilters, etc. In some embodiments, the application presents theseeffects as a set of items that fan out from the toolbar 4725.

As stated, the UI items 4745-4749 are arranged in a particular order.This order follows the order in which users most commonly apply the fivedifferent types of edits. Accordingly, the editing instructions 4815 arestored in this same order, in some embodiments. When a user selects oneof the items 4745-4749, some embodiments apply only the edits from thetools to the left of the selected tool to the displayed image (thoughother edits remain stored within the instruction set 4815).

The toolbar 4725 includes a set of GUI items 4750-4754 as well as asettings item 4755. The auto-enhance item 4750 automatically performsenhancement edits to an image (e.g., removing apparent red-eye,balancing color, etc.). The rotation button 4751 rotates any selectedimages. In some embodiments, each time the rotation button is pressed,the image rotates 90 degrees in a particular direction. Theauto-enhancement, in some embodiments, comprises a predetermined set ofedit instructions that are placed in the instruction set 4815. Someembodiments perform an analysis of the image and then define a set ofinstructions based on the analysis. For instance, the auto-enhance toolwill attempt to detect red-eye in the image, but if no red-eye isdetected then no instructions will be generated to correct it.Similarly, automatic color balancing will be based on an analysis of theimage. The rotations generated by the rotation button are also stored asedit instructions.

The flag button 4752 tags any selected image as flagged. In someembodiments, the flagged images of a collection can be displayed withoutany of the unflagged images. The favorites button 4753 allows a user tomark any selected images as favorites. In some embodiments, this tagsthe image as a favorite and also adds the image to a collection offavorite images. The hide button 4754 enables a user to tag an image ashidden. In some embodiments, a hidden image will not be displayed in thethumbnail display area and/or will not be displayed when a user cyclesthrough the images of a collection in the image display area. As shownin FIG. 48, many of these features are stored as tags in the image datastructure.

Finally, the settings button 4755 activates a context-sensitive menuthat provides different menu options depending on the currently activetoolset. For instance, in viewing mode the menu of some embodimentsprovides options for creating a new album, setting a key photo for analbum, copying settings from one photo to another, and other options.When different sets of editing tools are active, the menu providesoptions related to the particular active toolset.

One of ordinary skill in the art will recognize that the image viewingand editing GUI 4700 is only one example of many possible graphical userinterfaces for an image viewing, editing, and organizing application.For instance, the various items could be located in different areas orin a different order, and some embodiments might include items withadditional or different functionalities. The thumbnail display area ofsome embodiments might display thumbnails that match the aspect ratio oftheir corresponding full-size images, etc.

VI. Electronic Systems

Many of the above-described features and applications are implemented assoftware processes that are specified as a set of instructions recordedon a computer readable storage medium (also referred to as computerreadable medium). When these instructions are executed by one or morecomputational or processing unit(s) (e.g., one or more processors, coresof processors, or other processing units), they cause the processingunit(s) to perform the actions indicated in the instructions. Examplesof computer readable media include, but are not limited to, CD-ROMs,flash drives, random access memory (RAM) chips, hard drives, erasableprogrammable read-only memories (EPROMs), electrically erasableprogrammable read-only memories (EEPROMs), etc. The computer readablemedia does not include carrier waves and electronic signals passingwirelessly or over wired connections.

In this specification, the term “software” is meant to include firmwareresiding in read-only memory or applications stored in magnetic storagewhich can be read into memory for processing by a processor. Also, insome embodiments, multiple software inventions can be implemented assub-parts of a larger program while remaining distinct softwareinventions. In some embodiments, multiple software inventions can alsobe implemented as separate programs. Finally, any combination ofseparate programs that together implement a software invention describedhere is within the scope of the invention. In some embodiments, thesoftware programs, when installed to operate on one or more electronicsystems, define one or more specific machine implementations thatexecute and perform the operations of the software programs.

A. Mobile Device

The image editing and viewing applications of some embodiments operateon mobile devices. FIG. 49 is an example of an architecture 4900 of sucha mobile computing device. Examples of mobile computing devices includesmartphones, tablets, laptops, etc. As shown, the mobile computingdevice 4900 includes one or more processing units 4905, a memoryinterface 4910 and a peripherals interface 4915.

The peripherals interface 4915 is coupled to various sensors andsubsystems, including a camera subsystem 4920, a wireless communicationsubsystem(s) 4925, an audio subsystem 4930, an I/O subsystem 4935, etc.The peripherals interface 4915 enables communication between theprocessing units 4905 and various peripherals. For example, anorientation sensor 4945 (e.g., a gyroscope) and an acceleration sensor4950 (e.g., an accelerometer) is coupled to the peripherals interface4915 to facilitate orientation and acceleration functions.

The camera subsystem 4920 is coupled to one or more optical sensors 4940(e.g., a charged coupled device (CCD) optical sensor, a complementarymetal-oxide-semiconductor (CMOS) optical sensor, etc.). The camerasubsystem 4920 coupled with the optical sensors 4940 facilitates camerafunctions, such as image and/or video data capturing. The wirelesscommunication subsystem 4925 serves to facilitate communicationfunctions. In some embodiments, the wireless communication subsystem4925 includes radio frequency receivers and transmitters, and opticalreceivers and transmitters (not shown in FIG. 49). These receivers andtransmitters of some embodiments are implemented to operate over one ormore communication networks such as a GSM network, a Wi-Fi network, aBluetooth network, etc. The audio subsystem 4930 is coupled to a speakerto output audio (e.g., to output different sound effects associated withdifferent image operations). Additionally, the audio subsystem 4930 iscoupled to a microphone to facilitate voice-enabled functions, such asvoice recognition, digital recording, etc.

The I/O subsystem 4935 involves the transfer between input/outputperipheral devices, such as a display, a touch screen, etc., and thedata bus of the processing units 4905 through the peripherals interface4915. The I/O subsystem 4935 includes a touch-screen controller 4955 andother input controllers 4960 to facilitate the transfer betweeninput/output peripheral devices and the data bus of the processing units4905. As shown, the touch-screen controller 4955 is coupled to a touchscreen 4965. The touch-screen controller 4955 detects contact andmovement on the touch screen 4965 using any of multiple touchsensitivity technologies. The other input controllers 4960 are coupledto other input/control devices, such as one or more buttons. Someembodiments include a near-touch sensitive screen and a correspondingcontroller that can detect near-touch interactions instead of or inaddition to touch interactions.

The memory interface 4910 is coupled to memory 4970. In someembodiments, the memory 4970 includes volatile memory (e.g., high-speedrandom access memory), non-volatile memory (e.g., flash memory), acombination of volatile and non-volatile memory, and/or any other typeof memory. As illustrated in FIG. 49, the memory 4970 stores anoperating system (OS) 4972. The OS 4972 includes instructions forhandling basic system services and for performing hardware dependenttasks.

The memory 4970 also includes communication instructions 4974 tofacilitate communicating with one or more additional devices; graphicaluser interface instructions 4976 to facilitate graphic user interfaceprocessing; image processing instructions 4978 to facilitateimage-related processing and functions; input processing instructions4980 to facilitate input-related (e.g., touch input) processes andfunctions; audio processing instructions 4982 to facilitateaudio-related processes and functions; and camera instructions 4984 tofacilitate camera-related processes and functions. The instructionsdescribed above are merely exemplary and the memory 4970 includesadditional and/or other instructions in some embodiments. For instance,the memory for a smartphone may include phone instructions to facilitatephone-related processes and functions. The above-identified instructionsneed not be implemented as separate software programs or modules.Various functions of the mobile computing device can be implemented inhardware and/or in software, including in one or more signal processingand/or application specific integrated circuits.

While the components illustrated in FIG. 49 are shown as separatecomponents, one of ordinary skill in the art will recognize that two ormore components may be integrated into one or more integrated circuits.In addition, two or more components may be coupled together by one ormore communication buses or signal lines. Also, while many of thefunctions have been described as being performed by one component, oneof ordinary skill in the art will realize that the functions describedwith respect to FIG. 49 may be split into two or more integratedcircuits.

B. Computer System

FIG. 50 conceptually illustrates another example of an electronic system5000 with which some embodiments of the invention are implemented. Theelectronic system 5000 may be a computer (e.g., a desktop computer,personal computer, tablet computer, etc.), phone, PDA, or any other sortof electronic or computing device. Such an electronic system includesvarious types of computer readable media and interfaces for variousother types of computer readable media. Electronic system 5000 includesa bus 5005, processing unit(s) 5010, a graphics processing unit (GPU)5015, a system memory 5020, a network 5025, a read-only memory 5030, apermanent storage device 5035, input devices 5040, and output devices5045.

The bus 5005 collectively represents all system, peripheral, and chipsetbuses that communicatively connect the numerous internal devices of theelectronic system 5000. For instance, the bus 5005 communicativelyconnects the processing unit(s) 5010 with the read-only memory 5030, theGPU 5015, the system memory 5020, and the permanent storage device 5035.

From these various memory units, the processing unit(s) 5010 retrievesinstructions to execute and data to process in order to execute theprocesses of the invention. The processing unit(s) may be a singleprocessor or a multi-core processor in different embodiments. Someinstructions are passed to and executed by the GPU 5015. The GPU 5015can offload various computations or complement the image processingprovided by the processing unit(s) 5010. In some embodiments, suchfunctionality can be provided using CoreImage's kernel shading language.

The read-only-memory (ROM) 5030 stores static data and instructions thatare needed by the processing unit(s) 5010 and other modules of theelectronic system. The permanent storage device 5035, on the other hand,is a read-and-write memory device. This device is a non-volatile memoryunit that stores instructions and data even when the electronic system5000 is off. Some embodiments of the invention use a mass-storage device(such as a magnetic or optical disk and its corresponding disk drive) asthe permanent storage device 5035.

Other embodiments use a removable storage device (such as a floppy disk,flash memory device, etc., and its corresponding drive) as the permanentstorage device Like the permanent storage device 5035, the system memory5020 is a read-and-write memory device. However, unlike storage device5035, the system memory 5020 is a volatile read-and-write memory, such arandom access memory. The system memory 5020 stores some of theinstructions and data that the processor needs at runtime. In someembodiments, the invention's processes are stored in the system memory5020, the permanent storage device 5035, and/or the read-only memory5030. For example, the various memory units include instructions forprocessing multimedia clips in accordance with some embodiments. Fromthese various memory units, the processing unit(s) 5010 retrievesinstructions to execute and data to process in order to execute theprocesses of some embodiments.

The bus 5005 also connects to the input and output devices 5040 and5045. The input devices 5040 enable the user to communicate informationand select commands to the electronic system. The input devices 5040include alphanumeric keyboards and pointing devices (also called “cursorcontrol devices”), cameras (e.g., webcams), microphones or similardevices for receiving voice commands, etc. The output devices 5045display images generated by the electronic system or otherwise outputdata. The output devices 5045 include printers and display devices, suchas cathode ray tubes (CRT) or liquid crystal displays (LCD), as well asspeakers or similar audio output devices. Some embodiments includedevices such as a touchscreen that function as both input and outputdevices.

Finally, as shown in FIG. 50, bus 5005 also couples electronic system5000 to a network 5025 through a network adapter (not shown). In thismanner, the computer can be a part of a network of computers (such as alocal area network (“LAN”), a wide area network (“WAN”), or an Intranet,or a network of networks, such as the Internet. Any or all components ofelectronic system 5000 may be used in conjunction with the invention.

Some embodiments include electronic components, such as microprocessors,storage and memory that store computer program instructions in amachine-readable or computer-readable medium (alternatively referred toas computer-readable storage media, machine-readable media, ormachine-readable storage media). Some examples of such computer-readablemedia include RAM, ROM, read-only compact discs (CD-ROM), recordablecompact discs (CD-R), rewritable compact discs (CD-RW), read-onlydigital versatile discs (e.g., DVD-ROM, dual-layer DVD-ROM), a varietyof recordable/rewritable DVDs (e.g., DVD-RAM, DVD-RW, DVD+RW, etc.),flash memory (e.g., SD cards, mini-SD cards, micro-SD cards, etc.),magnetic and/or solid state hard drives, read-only and recordableBlu-Ray® discs, ultra density optical discs, any other optical ormagnetic media, and floppy disks. The computer-readable media may storea computer program that is executable by at least one processing unitand includes sets of instructions for performing various operations.Examples of computer programs or computer code include machine code,such as is produced by a compiler, and files including higher-level codethat are executed by a computer, an electronic component, or amicroprocessor using an interpreter.

While the above discussion primarily refers to microprocessor ormulti-core processors that execute software, some embodiments areperformed by one or more integrated circuits, such as applicationspecific integrated circuits (ASICs) or field programmable gate arrays(FPGAs). In some embodiments, such integrated circuits executeinstructions that are stored on the circuit itself. In addition, someembodiments execute software stored in programmable logic devices(PLDs), ROM, or RAM devices.

As used in this specification and any claims of this application, theterms “computer”, “server”, “processor”, and “memory” all refer toelectronic or other technological devices. These terms exclude people orgroups of people. For the purposes of the specification, the termsdisplay or displaying means displaying on an electronic device. As usedin this specification and any claims of this application, the terms“computer readable medium,” “computer readable media,” and “machinereadable medium” are entirely restricted to tangible, physical objectsthat store information in a form that is readable by a computer. Theseterms exclude any wireless signals, wired download signals, and anyother ephemeral signals.

While the invention has been described with reference to numerousspecific details, one of ordinary skill in the art will recognize thatthe invention can be embodied in other specific forms without departingfrom the spirit of the invention. For instance, many of the figuresillustrate various touch gestures (e.g., taps, double taps, swipegestures, press and hold gestures, etc.). However, many of theillustrated operations could be performed via different touch gestures(e.g., a swipe instead of a tap, etc.) or by non-touch input (e.g.,using a cursor controller, a keyboard, a touchpad/trackpad, a near-touchsensitive screen, etc.). In addition, a number of the figures (includingFIGS. 16, 45, and 46) conceptually illustrate processes. The specificoperations of these processes may not be performed in the exact ordershown and described. The specific operations may not be performed in onecontinuous series of operations, and different specific operations maybe performed in different embodiments. Furthermore, the process could beimplemented using several sub-processes, or as part of a larger macroprocess. Thus, one of ordinary skill in the art would understand thatthe invention is not to be limited by the foregoing illustrativedetails, but rather is to be defined by the appended claims.

While the invention has been described with reference to numerousspecific details, one of ordinary skill in the art will recognize thatthe invention can be embodied in other specific forms without departingfrom the spirit of the invention. For example, the various UI controlsillustrated in FIGS. 1-15, 18-30, 33 a-33 c, 34 a-34 c, 38-41, and 44are either depicted as being set with a finger gesture (e.g., placing,pointing, tapping one or more fingers) on a touch sensitive screen orsimply shown in a position without any indication of how they were movedinto position. One of ordinary skill in the art will understand that thecontrols of FIGS. 1-15, 18-30, 33 a-33 c, 34 a-34 c, 38-41, and 44 canalso be activated and/or set by a cursor control device (e.g., a mouseor trackball), a stylus, keyboard, a finger gesture (e.g., placing,pointing, tapping one or more fingers) near a near-touch sensitivescreen, or any other control system in some embodiments. Thus, one ofordinary skill in the art would understand that the invention is not tobe limited by the foregoing illustrative details, but rather is to bedefined by the appended claims.

We claim:
 1. A method comprising: defining a data structure thatrepresents an edited image managed by an image editing application,wherein defining the data structure comprises: defining an identifierfor identifying an original version of the edited image; defining a setof identifiers for identifying a set of edit instructions for applyingedits to the original version of the edited image; and defining a set ofcached images for storing a set of different versions of the editedimage.
 2. The method of claim 1, wherein the identifier for identifyingthe original version of the edited image is a pointer.
 3. The method ofclaim 1 further comprising defining a set of metadata fields for storinginformation that describes the image.
 4. The method of claim 1, whereinthe set of different versions of the image file comprises a thumbnailversion of the original version of the image file.
 5. The method ofclaim 1, wherein the set of different versions of the image filecomprises a display resolution version of the original version of theimage file.
 6. The method of claim 1, wherein the set of differentversions of the image file comprises a thumbnail version of a currentedited version of the image file.
 7. The method of claim 1, wherein theset of different versions of the image file comprises a displayresolution version of a current edited version of the image file.
 8. Anon-transitory machine-readable medium storing an image editingapplication for execution by at least one processing unit, the imageediting application comprising sets of instructions for: uponidentifying an image to manage, generating (1) a set of thumbnailversions of the image for display and (2) a display resolution versionof the image for display; storing an identifier for identifying to theimage, the set of thumbnail versions of the image, and the displayresolution version of the image in a data structure that represents theimage; upon receiving an edit to apply to the image, identifying a setof edit instructions for applying the edit to the image; and storing theset of edit instructions in the data structure.
 9. The non-transitorymachine-readable medium of claim 8, wherein the image editingapplication further comprises sets of instructions for: based on the setof edit instructions, generating an edited thumbnail version of theimage; and based on the set of edit instruction, generating an editeddisplay resolution version of the image.
 10. The non-transitorymachine-readable medium of claim 9, wherein the image editingapplication further comprises sets of instructions for: replacing in thedata structure the thumbnail version of the image with the editedthumbnail version of the image; and storing the edited displayresolution version of the image.
 11. The non-transitory machine-readablemedium of claim 8, wherein the image is stored in a database of anapplication, wherein the identifier for identifying the image comprisesa unique identifier, wherein the image editing application furthercomprises a set of instructions for querying the database of theapplication in order to access the image.
 12. The non-transitorymachine-readable medium of claim 11, wherein the application is an imageorganizing application.
 13. The non-transitory machine-readable mediumof claim 11, wherein the image editing application further comprises aset of instructions for: using the unique identifier to query thedatabase of the application in order to access the image when receivingthe edit to apply to the image; and storing the image in a locationlocal to the image editing application.
 14. The non-transitorymachine-readable medium of claim 13, wherein the local location is afile system of an operating system on which the image editingapplication executes.
 15. A non-transitory machine readable mediumstoring a program which when executed by at least one processing unitprovides a graphical user interface (GUI) for an image editingapplication, the GUI comprising: a display area for displaying an image;a set of editing tools for applying edits to the image; a userselectable toggle item for directing the image editing application toswitch between displaying (1) a first version of the image in thedisplay area and (2) a second version of the image in the display areathat has a set of editing operations applied through at least one of theediting tools to the first version of the image.
 16. The non-transitorymachine readable medium of claim 15, wherein the first version of theimage is an original image that does no have editing operations appliedthe original image.
 17. The non-transitory machine readable medium ofclaim 15, wherein the set of editing operations applied to the firstversion of the image comprises a crop operation that identifies aportion of the first version of the image to display in the displayarea.
 18. The non-transitory machine readable medium of claim 17,wherein when the selectable toggle item directs the image editingapplication to switch from displaying the second version of the image inthe display area to the first version of the image in the display area,the image editing application displays the portion of the first versionof the image in the display area.
 19. The non-transitory machinereadable medium of claim 19, wherein when the selectable toggle itemdirects the image editing application to switch from displaying thesecond version of the image in the display area to the first version ofthe image in the display area, the image editing application displaysentire the first version of the image in the display area.
 20. A methodof viewing different versions of an image, the method comprising:displaying a display area for displaying an image; displaying a set ofediting tools for applying edits to the image; receiving a selection ofa user selectable toggle item that causes the display area to switchbetween displaying (1) a first version of the image and (2) a secondversion of the image that has a set of editing operations appliedthrough at least one of the editing tools to the first version of theimage.
 21. The method of claim 20, wherein the selection of the userselectable toggle item is received through touch input.
 22. The methodof claim 21, wherein the touch input is a tap.
 23. The method of claim21, wherein the selection of the user selectable toggle item is a firstselection, further comprising receiving a second selection of the userselectable toggle item that causes the display area to switch betweendisplaying (1) the first version of the image and (2) the second versionof the image.
 24. The method of claim 23, wherein the first selection isreceived through a touch-and-hold input.
 25. The method of claim 24,wherein the second selection is received through a release of thetouch-and-hold input.